Question

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

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

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

plmedr等同于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的新手，所以非常感谢你的帮助！

Answer 1

我想出了这个问题。像大多数编码问题一样，它显而易见。

我在我的清单中使用的离子标签隐藏了* ngFor正在创建的离子项目。是的，我真傻。正如朱莉娅所说，这是一个离子问题（好吧，我的问题没有看到Ionic正在做什么）而不是Angular问题。

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

感谢您的帮助！

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

1 个答案: