如何在Angular只读input输入框中同时展示car的name与id值

你可以直接在Angular的模板绑定语法中拼接两个属性值，有两种常用实现方式：

• 直接在模板内拼接
  如果你不需要复用这个组合值，直接在[value]绑定中做字符串拼接即可，可以自定义两个值的分隔格式，比如用短横线、括号分隔：

  <!-- 格式示例：丰田 (1001) -->
  <input readonly type="text" [value]="car.name + ' (' + car.id + ')'">
  <!-- 也可以用模板字符串写法，结构更清晰 -->
  <input readonly type="text" [value]="`${car.name} (${car.id})`">
  

  要是car对象可能为空，建议加可选链避免运行时报错：

  <input readonly type="text" [value]="`${car?.name ?? ''} (${car?.id ?? ''})`">
  

• 组件类封装计算属性
  如果这个组合值需要在多处使用，或者格式规则比较复杂，建议在组件ts文件中封装getter，后续修改格式只需要改一处即可：
  组件类代码：

  get carShowValue(): string {
    if(!this.car) return '';
    return `${this.car.name} - ${this.car.id}`;
  }
  

  模板绑定代码：

  <input readonly type="text" [value]="carShowValue">
  

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