Angular 2 ngFor 元素不使用双向数据绑定重新渲染

Question

我有一个 table，其中 <tr> 与 ngFor 循环。我只想显示与使用 <select>.

的双向数据绑定属性的值相匹配的 <tr>

应用程序首次加载时运行良好，但当我更改 select 选项时，视图未按预期呈现。

__________CODE BELOW__________

html

<label>
    Hours
    <select
        [(ngModel)]="location"
        name="location">
        <option *ngFor="let loc of locations" [value]="loc.id">{{loc.name}}</option>
    </select>
</label>

<table>
    <thead>
        <tr>
          <th>Location</th>
            <th>Day</th>
            <th>Open</th>
            <th>Close</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let hour of hours">
          <td *ngIf="hour.locationId === location">
                locationId is {{hour.locationId}}
            </td>
            <td *ngIf="hour.locationId === location">
                {{hour.day}}
            </td>
            <td *ngIf="hour.locationId === location">
                {{hour.dayStart}}
            </td>
            <td *ngIf="hour.locationId === location">
                {{hour.dayEnd}}
            </td>
        </tr>

    </tbody>
</table>

组件

hours: any[] = [
    { locationId: 1, day: 'Sunday', dayValue: 0, dayStart: '9:00am', dayEnd: '7:00pm', open: false, working: false },
    { locationId: 1, day: 'Monday', dayValue: 1, dayStart: '9:00am', dayEnd: '7:00pm', open: true, working: true },
    { locationId: 1, day: 'Tuesday', dayValue: 2, dayStart: '9:00am', dayEnd: '7:00pm', open: true, working: true },
    { locationId: 1, day: 'Wednesday', dayValue: 3, dayStart: '9:00am', dayEnd: '7:00pm', open: true, working: true },
    { locationId: 1, day: 'Thursday', dayValue: 4, dayStart: '9:00am', dayEnd: '7:00pm', open: true, working: true },
    { locationId: 1, day: 'Friday', dayValue: 5, dayStart: '9:00am', dayEnd: '7:00pm', open: true, working: true },
    { locationId: 1, day: 'Saturday', dayValue: 6, dayStart: '9:00am', dayEnd: '7:00pm', open: true, working: true },
    { locationId: 2, day: 'Sunday', dayValue: 0, dayStart: '9:00am', dayEnd: '8:00pm', open: false, working: false },
    { locationId: 2, day: 'Monday', dayValue: 1, dayStart: '9:00am', dayEnd: '8:00pm', open: true, working: true },
    { locationId: 2, day: 'Tuesday', dayValue: 2, dayStart: '9:00am', dayEnd: '8:00pm', open: true, working: true },
    { locationId: 2, day: 'Wednesday', dayValue: 3, dayStart: '9:00am', dayEnd: '8:00pm', open: true, working: true },
    { locationId: 2, day: 'Thursday', dayValue: 4, dayStart: '9:00am', dayEnd: '8:00pm', open: true, working: true },
    { locationId: 2, day: 'Friday', dayValue: 5, dayStart: '9:00am', dayEnd: '8:00pm', open: true, working: true },
    { locationId: 2, day: 'Saturday', dayValue: 6, dayStart: '9:00am', dayEnd: '8:00pm', open: true, working: true }
],

locations: any[] = [
    { id: 1, name: 'Location 1', },
    { id: 2, name: 'Location 2', }
];

location: number = 1;

Answer 1

使用==代替===，或使用[ngValue]代替[value]。

与[value]，location属性中存储的值是字符串'1'或'2'，而你使用 === 将其与数字 1 或 2 进行比较。因此表达式的计算结果为 false。

Working plunkr

Answer 2

通常 angular 直接映射到输入 HtmlElement 属性。如果你做 [name]="'myinput'"

也是一样的

要了解差异，请检查选项指令的实现方式

https://github.com/angular/angular/blob/master/modules/@angular/forms/src/directives/select_multiple_control_value_accessor.ts#L154

Angular 2 ngFor 元素不使用双向数据绑定重新渲染

Angular 2 ngFor Element Not Re Rendering With Two Way Data Binding

angular

ngfor