[英]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.