Angular应用中含数字标识符的模型接口实现及模板调用报错如何解决

• {{trailer.data.480}} 触发NG5002是因为Angular模板的点访问语法不支持数字开头的属性名，JavaScript原生语法也不支持用点直接访问数字键属性，必须用方括号语法访问。
• 你写的 {{trailer.data?['480']}} 无效有两个可能原因：一是Angular 12.1之前的版本不支持可选链与方括号索引的组合写法；二是语法错误，可选链问号后需要加.再接方括号。

方法1：兼容所有Angular版本的基础写法 #

先通过非空判断保证trailer.data存在，再用方括号访问属性：

<!-- 方式A：通过*ngIf提前判断data存在 -->
<ng-container *ngIf="trailer.data">
  {{trailer.data['480']}}
  <!-- 绑定视频源推荐用属性绑定写法 -->
  <video [src]="trailer.data['480']"></video>
</ng-container>

<!-- 方式B：用短路运算省略额外标签 -->
{{trailer.data && trailer.data['480']}}
<video [src]="trailer.data && trailer.data['480']"></video>

方法2：Angular 12.1+ 正确的可选链写法 #

修正语法，可选链问号后加.再接方括号即可：

{{trailer?.data?.['480']}}
<video [src]="trailer?.data?.['480']"></video>

方法3：组件类预处理（推荐） #

把复杂属性访问逻辑放到组件类中，模板更简洁也避免语法问题：
首先在组件类中定义方法：

import { Component } from '@angular/core';
// 注意Movie接口的data字段要加上索引签名避免TS报错
interface Movie {
  // 其他字段省略
  data: Record<string, string> & { '480'?: string }
}

@Component({/* 组件配置省略 */})
export class YourComponent {
  get480pUrl(trailer: Movie): string {
    return trailer?.data?.['480'] || '';
  }
}

模板中直接调用方法：

{{get480pUrl(trailer)}}
<video [src]="get480pUrl(trailer)"></video>

额外注意项 #

如果绑定视频源时出现安全策略拦截提示，需要用DomSanitizer标记地址为可信任资源：

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

// 构造器注入DomSanitizer
constructor(private sanitizer: DomSanitizer) {}

get480pUrl(trailer: Movie): SafeUrl {
  const url = trailer?.data?.['480'];
  return url ? this.sanitizer.bypassSecurityTrustResourceUrl(url) : '';
}

内容的提问来源于stack exchange，提问作者Hasith