Блог

Главная - Вопросы по программированию - Угловой, объект всегда пустой в шаблоне html

Угловой, объект всегда пустой в шаблоне html

#html #angular #typescript

#HTML #angular #typescript

Вопрос:

У меня есть объект ‘waypointIcon’, и когда я вхожу в консоль из файла ts, он заполнен, но когда я пытаюсь вставить в html, он всегда пуст. В консоли ошибок нет, HTTP-запрос равен 200 в сетевом инспекторе браузера.

Массив nextFive обычно работает и отображается в html, но waypointicon по-прежнему пуст…

консольный журнал значка в файле ts

ts-файл:

     public waypointIcon: Icon = new Icon();
    filtersLoaded: Promise;

      constructor(private httpClient: HttpClient, private iconsService: IconsService) {
      }

      ngOnInit(): void {
        this.httpClient.get('assets/w_bosses.json').subscribe(data => {
          this.bossesFromJson = JSON.parse(JSON.stringify(data));
          this.getEventualBosses();
          this.sortAndFindNextFive();
        });
        this.iconsService.getWaypointIcon().then(icon => {
          this.waypointIcon = icon;
          console.log(this.waypointIcon);
          this.filtersLoaded = Promise.resolve(true);
        });
      }

html-файл:
<код

 <div *ngIf="filtersLoaded | async" class="card shadow">
  <div class="sub-card">
    <h2 class="card-title">Event timer</h2>
    <table class="table">
      <thead>
      <tr>
        <th scope="col">Boss</th>
        <th scope="col">Zona</th>
        <th scope="col">Waypoint</th>
        <th scope="col">Čas</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let boss of nextFive">
        <th scope="row">{{boss.name}}</th>
        <td>{{boss.zone}}</td>
        <td>{{this.waypointIcon.id}}</td>
        <td>{{boss.time}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
<p *ngIf="filtersLoaded | async">{{this.waypointIcon.id}}</p>

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

1. Есть ли какие-либо ошибки в консоли браузера или сетевом инспекторе? Вы уверены, что HTTP-запрос успешно завершен? Работает ли это, если вы жестко кодируете данные, а не пытаетесь их извлечь? И т.д. и т.п.

2. Http-запрос требует наблюдаемых

3. Getdata(): Наблюдаемые<любые[]>{this.HttpClient.get<любые[]>(‘assets/w_bosses.json’) }

4. Затем ngOnInit(){this. Getdata().subscribe(data => { this.bossesFromJson = JSON.parse(JSON.stringify(data)); this.getEventualBosses(); this.sortAndFindNextFive()}

5. <td>{{waypointIcon.id}}</td> вместо <td>{{this.waypointIcon.id}}</td>

Метки: ,