[英]Angular 2 ngFor Element Not Re Rendering With Two Way Data Binding
I have a table with the <tr>
being loop with ngFor
. 我有一个表,其中
<tr>
与ngFor
一起ngFor
。 I want to show only the <tr>
that matches the value of a two way data binding property using a <select>
. 我只想显示使用
<select>
匹配双向数据绑定属性值的<tr>
<select>
。
When the app first load it works fine but when I change the select
option the view doesn't render as desired. 首次加载应用程序时,它可以正常工作,但是当我更改
select
选项时,视图将无法按需呈现。
__________CODE BELOW__________ __________以下代码__________
html 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>
component 零件
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;
Use ==
instead of ===
, or use [ngValue]
instead of [value]
. 使用
==
代替===
,或者使用[ngValue]
代替[value]
。
With [value]
, the values stored in the location
property is the string '1' or '2', and you compare it, using ===
, to the number 1 or 2. So the expression is evaluated to false. 使用
[value]
,存储在location
属性中的值是字符串 '1'或'2',然后使用===
将其与数字 1或2进行比较。因此,表达式的计算结果为false。
Usually angular maps directly to the inputs HtmlElement properties. 通常,角度直接映射到输入的HtmlElement属性。 It's the same is if you do [name]="'myinput'"
如果您执行[name] =“'myinput'”,也是如此
To understand the difference check how the option directive is implemented 要了解差异,请检查如何实现option指令
https://github.com/angular/angular/blob/master/modules/@angular/forms/src/directives/select_multiple_control_value_accessor.ts#L154 https://github.com/angular/angular/blob/master/modules/@angular/forms/src/directives/select_multiple_control_value_accessor.ts#L154
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.