[英]Does BehaviorSubject somehow interfere with Angular2 *ngFor?
在我的组件中,我有一个公共属性,该属性是药物的类,并且内部具有一个属性,该属性是不同类Time的数组。 (我试图允许指定服用该药物的不同时间)
当我单击按钮时,我将一个新项推入数组,但是模板中的*ngFor
不会更新以反映更大的数组。
这是一个可以正常工作的plnkr: http ://plnkr.co/edit/Y9ywQyOABzC5BJ2LQvkJ?p=preview
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>
但是我的Ionic项目中的文件似乎不像plnkr版本那样工作。 当我将项目作为“离子服务”运行时,我看到该数组在控制台输出中添加了一个项目,但它从未在页面上直观显示。
我有些预感:也许我项目中的Angular版本是越野车,可能是我缺少应用程序中某个指令的地方,也许其他页面的不可变BehaviorSubject正在改变该页面; 诸如此类的东西,但是我仍然对Angular还是陌生的,因此非常感谢您的帮助!
我发现了问题。 像大多数编码问题一样,这很明显。
我在列表中使用的离子标签隐藏了* ngFor正在创建的离子项目。 是的,我真傻。 正如Julia所建议的,这是一个Ionic问题(嗯,我的问题没有看到Ionic在做什么),而不是Angular问题。
我还没有弄清楚为什么Ionic 2的嵌套离子列表中的ion-label隐藏了整个嵌套列表。 但这就是正在发生的事情。
谢谢你的帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.