Angular Not Rendering HTML до загрузки данных http

Question

У меня проблема с неработающим html, когда компонент загружается до тех пор, пока данные не будут получены из вызова API через службу.

Вот соответствующий код:

import { ApiService } from './services/api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {

  thedata;

  subscription: Subscription;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.getData();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }


  getData() {
    this.apiService.getUsers().subscribe(
      (res) => {
        this.thedata = [res];
      },
      (err) => {
        console.log('There was an error: ' + err);
      }
    )
  }

}

Затем в html-файле:

<div *ngFor="let data of thedata">
   <!-- other elements here and below -->
    {{ data.name }}
</div>

Моя проблема в том, что, хотя визуальный элемент для рендеринга существует, он не рендерится до загрузки данных.

Существует ли способ рендерингаHTML пока данные все еще загружаются из API?

Answer 1

Причина, по которой он не работает, заключается в том, что при инициализации вашего компонента нет никаких данных.

Вы можете свести все это к этому. Асинхронный канал позаботится о подписке / отписке части. Кроме того, он будет ожидать загрузки данных и затем передает данные в цикл for.

компонент:

import { ApiService } from './services/api.service';

export interface ExpectedDataModel {
  name: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  myData: Observable<ExpectedDataModel[]>;

  constructor(private apiService: ApiService) {
    this.myData = this.apiService.getUsers(); // I suppose this returns an array of objects ///
  }
}

шаблон:

<div *ngFor="let data of myData | async">
   <!-- other elements here and below -->
    {{ data.name }}
</div>

Answer 2

Попробуйте: -

.ts

 getData() {
const self = this;   //<====== add this
    this.apiService.getUsers().subscribe(
      (res) => {
      console.log(JSON.stringify(res)); <======
        self.thedata = [res];    
      },
      (err) => {
        console.log('There was an error: ' + err);
      }
)

}

.html

<ng-container *ngIf="thedata">
<div *ngFor="let data of thedata">
   <!-- other elements here and below -->
    {{ data?.name }}
</div>
</ng-container>

Answer 3

Нет, вы не можете, директива *ngFor помечает элементы (и их дочерние элементы) как «шаблон повторителя», шаблон создает повторное совпадение времени с количеством элементов в вашем массиве. Таким образом, «шаблон повторителя» никогда не будет существовать в DOM, пока длина вашего входного массива равна 0.

Вы можете попытаться смоделировать значение массива с помощью фиктивных элементов в вашем ts, пока оно ожидает ответа API, например:

thedata = [1,2,3,4,5,6]

Answer 4

Пока thedata пусто, ваш *ngFor не будет запущен, поэтому все, что внутри div, не будет добавлено в DOM.Вам нужно будет разместить контент, который будет отображаться, пока ваши данные загружаются за пределы *ngFor.