Question

我正在关注Meteor - Angular2教程并且工作正常。

唯一不起作用的是使用Angular2 UI自动绑定＆＃39;详细信息视图＆＃39;。例如，如果我导航到 Party1 的详细信息视图，则 Party1 的数据已正确加载并在Angular2＆＃39;详细信息视图中显示为＆＃39;。之后，如果 Party1 的数据发生变化（例如通过Mongo shell），则会将此类更改发送到浏览器（通过WebSockets），其中详细信息视图为＆＃39;显示，但新数据未显示在视图上。

以下是PartyDetailsComponent类的代码。

export class PartyDetailsComponent extends MeteorComponent implements OnInit, CanActivate {
  partyId: string;
  party: Party;

  constructor(private route: ActivatedRoute, private ngZone: NgZone) {
    super();
  }

  ngOnInit() {
  this.route.params
    .map(params => params['partyId'])
    .subscribe(partyId => {
      this.partyId = partyId;
      this.subscribe('party', this.partyId, () => {
        this.party = Parties.findOne(this.partyId);
      }, true);
    });
  }

  saveParty() {
    Parties.update(this.party._id, {
      $set: {
        name: this.party.name,
        description: this.party.description,
        location: this.party.location
      }
    });
  }

  canActivate() {
    const party = Parties.findOne(this.partyId);
    console.log(party);
    return (party && party.owner == Meteor.userId());
  }

}

这是PartyDetailsComponent

的模板

<form *ngIf="party" (submit)="saveParty()">
  <label>Name</label>
  <input type="text" [(ngModel)]="party.name" name="name">
  <label>Description</label>
  <input type="text" [(ngModel)]="party.description" name="description">
  <label>Location</label>
  <input type="text" [(ngModel)]="party.location" name="location">
  <button type="submit">Save</button>
  <a [routerLink]="['/']">Cancel</a>
</form>

提前感谢您提供任何帮助

Answer 1

我实际上只是阅读了更多的教程，找到了我的问题的答案。

一旦基础Mongo文档更改，只需在订阅代码中正确添加Meteo autorun（）方法，我就可以自动更新UI。

以下是适用的代码

ngOnInit() {
    this.route.params
    .map(params => params['partyId'])
    .subscribe(partyId => {
      this.partyId = partyId;
      this.subscribe('party', this.partyId, () => {
        this.autorun(() => {
          this.party = Parties.findOne(this.partyId);
        }, true);
      }, true);
    });
  }

对我来说并不完全清楚的是，如果您直接使用Meteo Mongo游标（例如通过模板中的*ngFor），则不需要自动运行。

Meteor Angular 2 - autobind在教程中不起作用

1 个答案: