Javascript 行为主体是否以某种方式干扰Angular2*ngFor？

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

当我单击一个按钮时，我会将一个新项目推入数组，但模板中的

*ngFor

不会更新以反映较大的数组

以下是一个正常工作的plnkr：

AddMedicing.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 {}

//我们的根应用程序组件
从'@angular/core'导入{ChangeDetectionStrategy，Component，NgModule，VERSION}
从'@angular/forms'导入{FormsModule}；
从“@angular/platform browser”导入{BrowserModule}
出口课时{
id：编号；
间隔：字符串；
时间？：数组；
天：数组；
useInterval：布尔值；
构造函数（id:number，interval:string，times:Array，days:Array）{
this.id=id；
这个。间隔=间隔；
this.times=times | |[]；
this.days=天| |[]；
如果（此时间间隔）{
this.useInterval=true；
}
}
}
出口类药物{
时间？：数组；
构造函数（）{
this.times=Array（）；
}
}
@组成部分({
选择器：“我的应用程序”，
templateUrl:'addMedicing.html'，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类应用程序{
公共药物：药物治疗；
构造函数（）{
这是一种新的药物；
}
附加项（）{
this.medicing.times.push（新时间（未定义，未定义，未定义，未定义））；
}
}
@NGD模块({
导入：[BrowserModule，FormsModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

addmedicing.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>

点击下面
单击我，下面应该会发生一些事情




采取每。。。


间隔
首先
每一秒
每三分之一
每四分之一
弗斯特
最后


星期中的一天
星期日
星期一
星期二
星期三
星期四
星期五
星期六


一天中的时间
早晨
下午
傍晚
就寝时间




但是为什么我不能在下面的文件中的medicing.times中添加一个时间，并让*ngFor提取它呢？

但我的爱奥尼亚项目中的文件似乎不像plnkr版本那样工作。当我以“ionic serve”的形式运行项目时，我看到数组在控制台输出中添加了一个项，但它从未在页面中出现

---

我有一些预感：也许我的项目中Angular的版本有缺陷，可能是我在我的应用程序的某个地方缺少了一些指令，也许来自其他页面的不可变行为主体正在改变这个页面；诸如此类的东西，但我还是新手，所以非常感谢你的帮助

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

我在列表中使用的离子标签隐藏了*ngFor创建的离子项。是的，我真是太笨了。正如朱莉娅所说，这是一个离子问题（我的问题是看不到离子在做什么），而不是角度问题

我还没有弄明白为什么离子2中嵌套离子列表中的离子标签隐藏了整个嵌套列表。但这就是正在发生的事情

---

谢谢你的帮助

我在你的代码中找不到

BehaviorSubject

。是的，我可能应该在那里添加更多细节。BehaviorSubject用于打开此模式的页面。我在这里（通过构造器）将药物加载到Drughts.ts中的BehaviorSubject中，有一种预感是，这就是为什么我的本地项目不起作用，但plnkr起作用了。。。父母是否可以观察到或不可变地覆盖孩子在模式中所做的更改？听起来不太可能，但我不知道为什么它不起作用。对我来说，这似乎也不太可能，但可以说，关于角度，我仍然是相当“新手”。对我来说，可见光仍然有点像黑匣子。到目前为止，它们都很整洁！您提到您的项目使用了ionic。尝试将带有Behavior subject subject和component的app store的一小部分导出到标准的angular cli项目中，然后在那里尝试。行为主体与ngFor是非常标准的组合，应该可以工作。