3

使用 Angular 6，我创建了一个从另一个应用程序集成的 Web 组件。在没有集成的情况下运行时，一切都适用于所有浏览器。当 Web 组件集成到其他应用程序中时，它可以在 IE、Safari、FF 上运行，但不能在 Chrome 上运行。

我设法确定了问题所在。第一次调用从我的后端获取一些配置数据。它应该被写入 var this.conf，但是在集成时不会在 Chrome 中发生。

我的组件：

public conf: any;

ngOnInit() {
  this.getData();
  console.log('Conf ngOnInit:', this.conf);
}

getData() {
  return this.partnerService.getData(this.name)
    .subscribe(
      (partner: any) => {
        console.log('partner: ', partner);
        this.conf = {
          id: partner['id'],
          name: partner['name']
        }
        console.log('conf:', this.conf);
     )
}

合作伙伴服务：

@Injectable()
export class PartnerService {

  constructor(public http: HttpClient) {
  }

  getData(name: string) {
    return this.http.get(environment.apiUrl + 'partners/conf/' + name)
      .map(resp => resp['partner']);
  }
}

我的观点：

<pre>Conf: {{ conf | json }}</pre>

控制台输出：

Conf ngOnInit: undefined
partner: {id: 1, name: "xxx", booking_name: "xxx", …}
conf: {id: 1, name: "xxx"}

var 在视图中没有得到解决。这可能是什么？

4

3 回答 3

2

ChangeDetectorRef在视图组件的构造函数中注入：

constructor(private cd: ChangeDetectorRef) {
}

在订阅功能中尝试：

this.conf = {};
this.conf.id = partner['id'];
this.conf.name = partner['name'];
this.cd.detectChanges();

这可能是时间/更改检测滴答的问题，仅在 Chrome 中显示。至少它会排除这个等式

于 2018-07-18T15:36:50.233 回答
0

编辑：新解决方案。尝试：

<pre *ngIf="conf && conf.id && conf.name">Conf: {{ conf | json }}</pre>
于 2018-07-13T09:06:25.747 回答
0

我认为你的问题在于异步流程......当你 consol.log 你console.log('Conf ngOnInit:', this.conf);的 nginit ..它还没有填满this.partnerService.getData(this.name)

试试这个>

public conf: any;

ngOnInit() {
      this.getData().subscribe(()=>{
     console.log('Conf ngOnInit:', this.conf);
});


}

getData() {
  return Observable.From(this.partnerService.getData(this.name)
    .subscribe(
      (partner: any) => {
        console.log('partner: ', partner);

        this.conf = {};
         this.conf.id = partner['id'];
          this.conf.name: partner['name'];
        console.log('conf:', this.conf);
     ))
}
于 2018-07-13T12:11:00.413 回答