Angular select标签*ngFor失效问题求助及后端根源定位

遇到的问题 #

最近做Angular项目时，写了这段下拉框代码：

<select class="form-control" required> 
  <option *ngFor="let car of cars" type="text">{{car.Name}}</option> 
</select>

奇怪的是，下拉选项多的时候显示正常，只有单个选项时*ngFor直接失效，只能拿到单个名称。一开始我还琢磨能不能直接在HTML里写条件判断绕过去（不想额外写JS或JQuery），比如设想这样的逻辑：

<!-- 设想的判断逻辑 -->
<!-- 选项数>1时用*ngFor遍历 -->
if(options.length>1){<option *ngFor="let car of cars" type="text">{{car.Name}}</option>} 
<!-- 只有单个选项时直接渲染 -->
else {<option *ngIf="car" type="text">{{car.Name}}</option>}

我的Car类定义是这样的：

export class Car { 
  id: String; 
  name: [{ brand: String, }] 
}

问题根源&解决 #

折腾半天后才发现，问题根本不在前端！是后端返回的数据格式不统一：多元素时返回数组[]，单个元素时却返回对象{}，这就导致*ngFor没法正常遍历单个对象。跟后端同学沟通后，让他们统一返回数组格式（哪怕只有一个元素也要用数组包裹），问题就直接解决了！

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