BehaviorSubject 是否会以某种方式干扰 Angular2 *ngFor？答案

【问题标题】：Does BehaviorSubject somehow interfere with Angular2 *ngFor?BehaviorSubject 是否会以某种方式干扰 Angular2 *ngFor？
【发布时间】：2017-04-22 15:29:24
【问题描述】：

在我的组件中，我有一个公共属性，它是一个 Medication 类，其中有一个属性是不同类 Time 的数组。（我试图允许指定服用这种药物的不同时间）

当我单击一个按钮时，我将一个新项目推入数组，但我的模板中的 *ngFor 不会更新以反映更大的数组。

这是一个正常工作的 plnkr：http://plnkr.co/edit/Y9ywQyOABzC5BJ2LQvkJ?p=preview

addmedication.ts 的 plnkr 等价物

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

但我的 Ionic 项目中的文件似乎不像 plnkr 版本那样工作。当我将我的项目作为“离子服务”运行时，我看到该数组在控制台输出中添加了一个项目，但它从未在页面中直观地显示。

我有一些预感：也许我的项目中的 Angular 版本有问题，可能是我在我的应用程序的某个地方缺少包含一些指令，也许来自其他页面的不可变 BehaviorSubject 正在改变这个页面；类似的东西，但我还是 Angular 的新手，非常感谢您的帮助！

【问题讨论】：

我在你的代码中找不到BehaviorSubject。
是的，我可能应该在那里添加更多细节。 BehaviorSubject 用于打开此 Modal 的页面。我在这里（通过构造函数）将药物加载到 BehaviorSubject> 中的drugs.ts 中，一个预感就是为什么我的本地项目不起作用但plnkr 起作用...github.com/wadewadewadewadewadewade/ineffectua/blob/master/src/… Can a父级 Observable 或 Immutable 覆盖子级在模态中所做的更改？
听起来不太可能，但我不知道为什么它不起作用。
这对我来说似乎也不太可能，但对于 Angular 来说，我仍然很“绿色”。 Observables 对我来说仍然是一个黑盒子。到目前为止，它们都很整洁！
您提到您的项目使用 ionic.尝试将带有 BehaviorSubject 主题和组件的应用商店的一小部分导出到标准的 angular-cli 项目并在那里尝试。带有 ngFor 的 BehaviorSubject 是非常标准的组合，应该可以工作。

标签： javascript arrays angular ionic-framework

【解决方案1】：

我发现了这个问题。像大多数编码问题一样，这是显而易见的。

我在列表中使用的离子标签隐藏了 *ngFor 正在创建的离子项目。是的，我就是这么笨。正如 Julia 建议的那样，这是一个 Ionic 问题（好吧，我的问题没有看到 Ionic 在做什么）而不是 Angular 问题。

我还没有弄清楚为什么 Ionic 2 中嵌套离子列表中的 ion-label 隐藏了整个嵌套列表。但这就是正在发生的事情。

感谢您的帮助！

【讨论】：