Question

所以我正在尝试开发一个非平凡的Angular2应用程序。我有些头疼的UI有时无法更新以反映应用程序状态。我已经搜索了很多关于如何解决这个问题的建议，并且我已经找到了我尝试过的建议，但没有完全理解它应该如何或为什么这样。在这里，我想问一些关于我收集的一些事情的问题。请参阅此参考代码：

Person.ts

export class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

DataService.ts

@Injectable()
export class DataService {
  list: Person[] = [];
  add(person: Person) {
    this.list.push(person);
  }
  edit(person: Person, newName: string) {
    person.name = newName;
  }
}

组件

@Component({
  template: `<div *ngFor="let person of dataService.list">
               {{person.name}}
             <div>
             <button (click)="onClickAdd()">Add</button>`
})
export class MyPage {
  constructor(private dataService: DataService) { }
  onClickAdd() {
    // async function to get input from user
    Alert.create({
      inputs: [...],
      buttons: [{
        text: 'OK',
        handler: (data) => {
          this.dataService.add(new Person(data.name));
        }
      }]
    });
  }
}

现在问题......

当我调用this.list.push(...)时，数组引用不会更改。我已经读过引用应该改变，以便Angular检测到某些内容已经发生变化，因此应该更新视图。我已经看到上面的代码也适用（大多数情况下）。这是为什么？更重要的是，我建议我做这样的事情以确保数组引用本身发生变化吗？
```
add(person: Person) {
  this.list = [person].concat(this.list);
}
edit(person: Person, newName: string) {
  person.name = newName;
  this.list = [].concat(this.list);
}
```

我已经读过，只要数据异步更改，就应该使用Observables。如此改变实施会有什么好处吗？

export class DataService {
  list: Person[] = [];
  _observableList: BehaviorSubject<Person[]> = new BehaviorSubject([]);
  get observableList(): Observable<Person[]> { return this.observableList.asObservable() }
  add(person: Person) {
    this.list.push(person);
    this._observableList.next(this.list);
  }
  edit(person: Person, newName: string) {
    person.name = newName;
    this._observableList.next(this.list);
  }
}

<div *ngFor="let person of dataService.observableList | async">
  {{person.name}}
</div>

Answer 1

1）引用不需要更改角度2拾取阵列内的新元素。可以将新值添加到数组中并应进行检测。

我个人认为解释角度变化检测这里的话题太长了请通过以下链接阅读它的工作原理。

Article

2）是的，你可以使用observables，这是目前正在发生的趋势，如果你使用类似RxJS的东西，这似乎是趋势＆＃39;查一查。

Angular2 ::关于最佳实践的一些问题

1 个答案: