Angular 6 个变量未在 Google Chrome 中解析（Web 组件）

Question

使用 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"}

视图中的变量未解析。这会是什么？

Answer 1

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

<pre *ngIf="conf && conf.id && conf.name">Conf: {{ conf | json }}</pre>

Answer 2

我认为你的问题是异步流程...当你 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);
     ))
}

Answer 3

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

constructor(private cd: ChangeDetectorRef) {
}

在订阅函数中尝试：

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

这可能是 timing/change 检测标记的问题，它只显示在 Chrome 中。至少它会排除等式

Angular 6 个变量未在 Google Chrome 中解析（Web 组件）

Angular 6 variable not resolved in Google Chrome (web component)

angular

observable

angular-elements