如何在HTML模板中显示ngModel绑定的offers数组值而非[object Object]

嘿，我懂你遇到的困扰了——当你把offers数组直接通过[ngModel]="offers" formControlName="offers"绑定后，页面输出[object Object]，这是因为Angular会把数组转为字符串形式展示，而数组里的对象调用toString()就会得到这个结果。咱们分两种场景来解决：

场景1：只是想在页面展示数组的具体内容 #

如果不需要表单交互，只是要把数组里的数据呈现出来，有两种简单的方式：

方式一：遍历数组显示每个对象的属性 #

用*ngFor循环遍历offers数组，逐个取出对象的属性展示（把示例里的name、price换成你实际的属性名）：

<div class="offer-list">
  <div *ngFor="let offer of offers" class="offer-item">
    名称：{{ offer.name }} | 价格：{{ offer.price }}
  </div>
</div>

方式二：用json管道快速查看完整结构 #

如果只是要调试或者快速展示数组的JSON结构，用Angular内置的json管道就可以：

<!-- pre标签会保留格式，让JSON更易读 -->
<pre>{{ offers | json }}</pre>

场景2：需要将数组和表单控件绑定（比如多选、下拉选择） #

如果你是要做表单交互（比如多选框选择多个offer），那不能直接把整个数组绑定到formControlName上，得调整绑定逻辑：

示例：多选框绑定数组元素 #

在模板里：

<div *ngFor="let offer of offers">
  <input 
    type="checkbox" 
    [formControl]="selectedOffersControl" 
    [value]="offer"
  >
  <label>{{ offer.name }}</label>
</div>

在组件类里初始化表单控件：

import { FormControl } from '@angular/forms';

// 初始化控件，默认值为空数组
selectedOffersControl = new FormControl([]);

这样选中的offer会被存入selectedOffersControl.value，页面上也能正确显示每个选项，不会出现[object Object]。

注意点 #

尽量避免同时使用ngModel和formControlName，Angular的响应式表单推荐直接用formControl或formControlName来绑定，混合使用容易导致逻辑混乱哦。

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