Angular类型错误：'string'无法赋值给'Number'问题排查

错误根源 #

问题出在Angular模板的插值语法特性上：当使用{{ }}传递数据时，无论原始值的类型是什么，最终都会被转换为字符串。哪怕m.views是Number类型，通过views={{m.views}}传递给子组件时，实际传入的是字符串形式的数字，和子组件@Input() views: Number的类型要求不匹配，因此触发类型错误。

解决方法 #

最直接且符合Angular规范的方案是改用方括号属性绑定语法，它会保留数据的原始类型：

<mnemonic-card [views]="m.views"></mnemonic-card>

这种方式下，Number类型的m.views会直接传递给子组件的Number类型输入属性，不会出现类型转换问题。

如果因特殊场景必须使用插值语法，也可以在子组件中添加类型转换逻辑：

// 子组件MnemonicCard.ts
private _views: Number;

@Input() 
set views(value: string | Number) {
  this._views = typeof value === 'string' ? Number(value) : value;
}

get views(): Number {
  return this._views;
}

但优先推荐方括号绑定，这是Angular处理类型化数据传递的标准方式。

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