Question

我有一张表<tr>正在循环ngFor。我想只使用<tr>显示与双向数据绑定属性的值匹配的<select>。

当应用程序首次加载时，它可以正常工作，但是当我更改select选项时，视图无法根据需要进行渲染。

__________以下代码__________

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>

成分</ P>

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'，您可以使用===对其进行比较， number 1或2.因此表达式被评估为false。

Working plunkr

Answer 2

通常角度直接映射到输入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元素无法重新渲染双向数据绑定

2 个答案: