使用 ngFor 遍历 class 个对象的数组未显示在 angular 5

Question

我正在尝试为 Angular 5 中的下拉菜单遍历 class 个对象数组。下拉菜单中没有显示任何内容，浏览器控制台中也没有错误。

对象数组源自此模型：

    export class NewEnglandState {
    constructor (
        name: string,
        abbrv: string,
        lat: number,
        lng: number,
        zoom: number,
    ) {}
}

在我构建数组的组件中：

    export class InterfaceComponent implements OnInit {
      newenglandstates = [
        new NewEnglandState('Massachusetts', 'MA', 42.02889443064134, -71.65008582421876, 8 ),
        new NewEnglandState( 'Connecticut', 'CT', 41.527086145800006, -72.65808142968751, 9 ),
        new NewEnglandState( 'Maine', 'ME', 44.95702443907399, -68.95843543359376, 7 ),
        new NewEnglandState( 'New Hampshire', 'NH', 43.95328236137632, -71.28753699609376, 8 ),
        new NewEnglandState('Rhode Island', 'RI', 41.64828864411775, -71.30401648828126, 9 ),
        new NewEnglandState('Vermont', 'VT', 43.901850824945996, -72.50152625390626, 8 ),
        new NewEnglandState('All New England', 'ANE', 43.8992496, -71.6135105, 7 )
      ];
}

这就是我在组件的 HTML:

<select class="form-control" title="Filter by state."  (change)="onSelect($event.target.value)">
            <option *ngFor="let state of newenglandstates" value="state.abbrv">
                {{ state.name }}
            </option>           
        </select>

下拉菜单中未显示任何文字。我需要在 ngFor 函数中添加什么吗？

Answer 1

您的代码有 2 个问题

问题一：

<option *ngFor="let state of newenglandstates" value="state.abbrv">
    {{ state.name }}
</option>

应该是

<option *ngFor="let state of newenglandstates" value="{{state.abbrv}}">
   {{ state.name }}
</option>

value 用作 HTML 属性并需要一个字符串值，因此当 value="state.abbrv" 时，所有选项最终都具有字符串 state.abbrv（不是state.abbrv 的值），因此您需要使用数据绑定语法来提供值。

问题二：

您的 class 构造函数应该是

export class NewEnglandState {
    constructor (
        public name: string,
        public abbrv: string,
        public lat: number,
        public lng: number,
        public zoom: number,
    ) {}
}

相当于

export class NewEnglandState {

  public name: string;
  public abbrv: string;
  public lat: number;
  public lng: number;
  public zoom: number;

  constructor(
    name: string,
    abbrv: string,
    lat: number,
    lng: number,
    zoom: number,
  ) {
    this.name = name;
    this.abbrv = abbrv;
    this.lat = lat;
    this.lng = lng;
    this.zoom = zoom;
  }
}

在构造函数参数中缺少 public 关键字（或一般的任何访问说明符）使参数成为普通函数参数。

working stackblitz

使用 ngFor 遍历 class 个对象的数组未显示在 angular 5

iterating over an array of class objects using ngFor not displaying in angular 5

javascript

arrays

ngfor

angular