Question

我正在使用Angular第5版。

我正在使用Angular-Maps从Google商家信息网站服务加载数据。我运行一项服务来获取数据并将其加载到变量说“数据”中。在我的组件中，我订阅了＆＃39;数据＆＃39;，所以每当数据＆＃39;数据＆＃39;变化，我的观点应该更新。

但令人惊讶的是，当数据＆＃39;更改，我能够使用console.log记录更改视图不更新？它只在我与视图中的其他元素交互时才会更新。

这是我服务的快照

  private rs = new BehaviorSubject<Object>(undefined);
  rd = this.rs.asObservable();

  constructor(private mapi: MapsAPILoader)
  {
    this.mapsAPILoader.load().then(() =>
    {
      this.ps = new google.maps.places.PlacesService(document.createElement('div'));
    });
  }

  fPi(pid: string)
  {
    this.ps.getDetails(
    { placeId: pid }, (pr, status) =>
    {
      if(status === 'OK')
      {
        this.extract(pr);
      }
    });
  }

  extract(pr)
  {
    let details = [];
    if (pr.formatted_address)
    {
      details.push({"field": "Address", "value": placeResult.formatted_address});
    }

    if (pr.international_phone_number)
    {
      details.push({"field": "Phone Number", "value": placeResult.international_phone_number});
    }
    this.update(placeDetails);
  }

  update(rd: Object)
  {
    console.log(rd);
    this.rs.next(rd);
  }

这是我的组成部分，其中包括

this.service.rd.subscribe(rd =>
    {
      if (rd)
        this.data = Object.values(rd);
    });

在HTML中我只是做

<div *ngIf="data">
    {{data}}
</div>

那么，这里出了什么问题以及如何才能做到这一点？

Answer 1

这是我如何在我的一个组件中处理相同类型的情况的示例。这里的主要内容是我创建一个Observable，然后将行为的响应分配给Observable。然后我在模板中使用异步管道，这将确保每个东西都能正确取消订阅。这是你在上面做的几乎相同的一个例子：

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { PitchingInitiativesService } from '../../services/pitching-initiatives.service';
import { EventService } from 'app/services/events/events.service';


@Component({
    selector: 'app-pitching-table',
    templateUrl: './pitching-table.component.html'
})

export class PitchingTableComponent implements OnInit {

    @Input() searchText = '';
    searchKey = 'name';
    table: any = [];

    constructor(
        private pitching: PitchingInitiativesService,
        private events: EventService
    ) {}

    ngOnInit() {
        this.pitching.getPitchingSubject();
        this.pitching.pitchingResponse$.subscribe(response => this.table = response);
    }

    editPi(id = null) {
        this.events.pitchingId(id);
    }

    editMilestones(id) {
        this.events.milestonesId(id);
    }

    archivePi(id) {
        this.pitching.postArchivePitch(id).subscribe(response => {
            this.pitching.getPitchingSubject();
        });
    }

}

然后在我的模板中，我使用异步管道迭代Observable：

<tr *ngFor="let row of table | async | filter: searchText : searchKey">

我希望这会有所帮助......

Angular 5查看不使用Model更新

1 个答案: