Переменная Angular 6 не разрешена в Google Chrome (веб-компонент)

Используя Angular 6, я создал веб-компонент, интегрированный из другого приложения. Все работает во всех браузерах при работе без интеграции. Когда веб-компонент интегрирован в другое приложение, он работает в IE, Safari, FF, но не в Chrome.

Мне удалось определить проблему. Первый вызов получает некоторые данные конфигурации из моего бэкэнда. Это должно быть записано в вар 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"}

Вар не был решен в представлении. Что бы это могло быть?

Источник

3 ответа

Решение

Введите ChangeDetectorRef в конструкторе компонента view:

constructor(private cd: ChangeDetectorRef) {
}

В функции подписки попробуйте:

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

Это может быть проблема с отметкой времени / изменения, которая отображается только в Chrome. По крайней мере, это будет исключать из уравнения

Источник

Я думаю, что вы проблема для асинхронного потока... когда вы 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);
     ))
}
Источник

Изменить: новое решение. пытаться:

<pre *ngIf="conf && conf.id && conf.name">Conf: {{ conf | json }}</pre>
Источник
Другие вопросы по тегам