각도 2 ngFor 요소 양방향 데이터 바인딩으로 렌더링하지 않음

<tr>이 루프 인 테이블이 ngFor입니다. <select>을 사용하는 양방향 데이터 바인딩 속성 값과 일치하는 <tr> 만 표시하려고합니다.각도 2 ngFor 요소 양방향 데이터 바인딩으로 렌더링하지 않음

앱을 처음로드하면 올바르게 작동하지만 select 옵션을 변경하면보기가 원하는대로 렌더링되지 않습니다.

__________CODE BELOW__________

PLUNKER CODE

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;

출처

2016-11-10 locnguyen