Блог

Главная - Вопросы по программированию - Данные углового отклика не отображаются на html-странице

Данные углового отклика не отображаются на html-странице

#angular

Вопрос:

Данные поступают из API, и я вижу журнал консоли, но html-страница не отображается!

компонент.ts

 export class AuthComponent implements OnInit {
  appSetting: AppSetting[] = [];
  constructor(private http: HttpClient) {}

  async ngOnInit() {
    await this.AppSetting().then((result: AppSetting[]) => {
      this.appSetting = resu<
    });
    console.log(this.appSetting);
  }

  async AppSetting() {
    return await this.http
      .get<AppSetting[]>(environment.apiUrl   '/AppSetting/GetsPublich')
      .toPromise();
  }
}

component.html

 <ul *ngFor="let item of appSetting">
  <li>{{item.name}}</li>
</ul>
<router-outlet></router-outlet>

Комментарии:

1. Выглядит хорошо для меня (за исключением того, что вы, вероятно, хотите добавить ngFor в li элемент вместо ul этого ). Вы проверили, отображается ли ваш шаблон вообще (добавив некоторое статическое содержимое)?

2. это должно сработать на самом деле попробуйте очистить кэш вашего браузера

Ответ №1:

Вы должны использовать | async в *ngFor при использовании асинхронной функции.

 <ul *ngFor="let item of appSetting | async">
  <li>{{item.name}}</li>
</ul>

Комментарии:

1. асинхронно для наблюдаемых объектов с объектами behaviorsubject , так что это не сработает, братан.

Ответ №2:

Возможно, это связано с тем, что вы пытаетесь отобразить данные до того, как они будут извлечены async функцией. Возможно, вы можете легко решить эту проблему, не инициализируя массив; поэтому измените это:

 appSetting: AppSetting[] = [];

Для

 appSetting: AppSetting[];

И окружите <ul> <div *ngIf="appSetting">...</div> вот так, как показано ниже:

 <div *ngIf="appSetting">
  <ul *ngFor="let item of appSetting">
    <li>{{item.name}}</li>
  </ul>
</div>

Комментарии:

1. Спасибо, но это не сработало

Метки: