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

Question

I have a table with the <tr> being loop with ngFor . I want to show only the <tr> that matches the value of a two way data binding property using a <select> .

When the app first load it works fine but when I change the select option the view doesn't render as desired.

__________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>

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;

Answer 1

Use == instead of === , or use [ngValue] instead of [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.

Working plunkr

Answer 2

Usually angular maps directly to the inputs HtmlElement properties. It's the same is if you do [name]="'myinput'"

To understand the difference check how the option directive is implemented

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