Does BehaviorSubject somehow interfere with Angular2 *ngFor?

Question

In my Component I have a public property that is a class of Medication, and that has a property within it that is an array of a different class Time. (I'm trying to allow specifying different times that this medication is taken)

When I click a button I push a new item into the array, but the *ngFor in my template doesn't update to reflect the larger array.

Here's a plnkr that works correctly: http://plnkr.co/edit/Y9ywQyOABzC5BJ2LQvkJ?p=preview

The plnkr equivilant of addmedication.ts

//our root app component
import {ChangeDetectionStrategy, Component, NgModule, VERSION} from '@angular/core'
import { FormsModule } from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser'

export class Time {
    id: number;
    interval: string;
    times?: Array<string>;
    days?: Array<string>;
    useInterval: boolean;
    constructor(id: number, interval: string, times: Array<string>, days: Array<string>) {
        this.id = id;
        this.interval = interval;
        this.times = times || [];
        this.days = days || [];
        if (this.interval) {
            this.useInterval = true;
        }
    }
}

export class Medication {
  times?: Array<Time>;
  constructor() {
    this.times = Array<Time>();
  }
}

@Component({
  selector: 'my-app',
  templateUrl: 'addmedication.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App {
  public medication: Medication;
  constructor() {
    this.medication = new Medication();
  }
  additem() {
    this.medication.times.push(new Time(undefined, undefined, undefined, undefined));
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

addmedication.html

<div>
      <h2>Click below</h2>
      <button (click)="additem()">Click me and something should happen below</button>
    <ul>
          <li *ngFor="let time of medication.times">
            <ul>
              <li>
                <label>Taken every...</label>
                <input type="checkbox" [(ngModel)]="time.useInterval" name="useInterval" />
              </li>
              <li *ngIf="time.useInterval">
                <label>Interval</label>
                <select [(ngModel)]="time.interval" name="interval">
                  <option>Every First</option>
                  <option>Every Second</option>
                  <option>Every Third</option>
                  <option>Every Fourth</option>
                  <option>First</option>
                  <option>Last</option>
                </select>
              </li>
              <li>
                <label>Day of Week</label>
                <select [(ngModel)]="time.days" name="days" multiple="true">
                  <option>Sunday</option>
                  <option>Monday</option>
                  <option>Tuesday</option>
                  <option>Wednesday</option>
                  <option>Thursday</option>
                  <option>Friday</option>
                  <option>Saturday</option>
                </select>
              </li>
              <li>
                <label>Time of Day</label>
                <select [(ngModel)]="time.times" name="times" multiple="true">
                  <option>Morning</option>
                  <option>Afternoon</option>
                  <option>Evening</option>
                  <option>Bedtime</option>
                </select>
              </li>
            </ul>
          </li>
        </ul>
        <div>
      But why can't I add a <b>Time</b> to <b>medication.times</b> in the file below and have the <b>*ngFor</b> pick it up?
      <a href="https://github.com/wadewadewadewadewadewade/ineffectua/blob/master/src/pages/medications/addmedication.ts" target="_blank">github -> addmedication.ts</a>
      <a href="https://github.com/wadewadewadewadewadewade/ineffectua/blob/master/src/pages/medications/addmedication.html" target="_blank">github -> addmedication.html</a>
      </div>
        </div>

But the files in my Ionic project do not seem to work like the plnkr version does. When I run my project as 'ionic serve' I see the array get an item added to it in the console output, but it never appears visually in the page.

• https://github.com/wadewadewadewadewadewade/ineffectua/blob/master/src/pages/medications/addmedication.ts
• https://github.com/wadewadewadewadewadewade/ineffectua/blob/master/src/pages/medications/addmedication.html

I have some hunches: maybe the version of Angular in my project is buggy, it could be that I am missing including some directive in my app somewhere, perhaps the immutable BehaviorSubject from some other page is altering this page; stuff like that, but I am still new to Angular so your help is greatly appreciated!

Answer 1

I figured out the issue. Like most coding problems, it was something obvious.

The ion-labels I was using in my list were hiding the ion-items that *ngFor was creating. Yup, I'm that dumb. As Julia suggested, this was an Ionic issue (well, my issue not seeing what Ionic was doing) and not an Angular issue.

I haven't figured out why ion-label in a nested ion-list in Ionic 2 are hiding the entire nested list yet. But that's what is happening.

Thanks for your help!