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