Блог

Я прошу прощения, если это не очень хорошо обработано. Я здесь новичок. Итак, я собрал свой первый SPA и развернул, однако использование Ngif выдает неверный вывод из-за задержки ответа от стороннего API. Я использую API ‘haveibeenpwned’ для получения информации о конкретных нарушениях данных. Проблема в том, что из-за задержки, если нарушение действительно существует, сначала отображается сообщение «Нарушение не найдено!», прежде чем фактически отображать соответствующую информацию о нарушении. Я использую Ngif, чтобы проверить, пуст ли массив ответов, и, очевидно, из-за задержки ответа он отобразит, что нарушение не обнаружено, потому что выходной массив сначала пуст.

Могу ли я перехватить его другим способом, не используя Ngif в шаблоне представления? Итак, мой код выглядит следующим образом:

 <div *ngIf="breachData.length > 0">
  <div *ngFor="let item of breachData; let i = index">
    <img src="{{item.LogoPath}}" alt="{{item.Name}}" class="small-logo mb-2">
    <p><strong>Breach Name:</strong> {{item.Name}}</p>
    <p><strong>Date of breach:</strong> {{item.BreachDate | date : "dd/MM/y"}}</p>
    <p><strong>Description:</strong></p>
    <p [innerHTML]="item.Description"></p>
  </div>
</div>

<div *ngIf="!breachData.length">
  <p>No breach found!</p>
</div>
  

Я использовал Angular 9, когда это было создано, и я потерял часть кода, поэтому прошу прощения, если это кажется не совсем правильным, но в основном я использовал ngIf и ngElse. Возможно ли перехватить его перед выводом в представлении? Как, скажем, в breachcomponent.component.ts? Поскольку я использую следующее:

 this.breachData.push(data);
  

Вот код для breachcomponent:

 import { Component, OnInit } from '@angular/core';
import {HibpService} from "../hibp.service";
import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-breachcomponent',
  templateUrl: './breachcomponent.component.html',
  styleUrls: ['./breachcomponent.component.css']
})
export class BreachcomponentComponent implements OnInit {
  breach;
  public breachData = [];

  constructor(private hibpService: HibpService, private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.hibpService.showBreachInfo(params.get('breachName')).subscribe((data) => {
        this.breachData.push(data);
        console.log(this.breachData);
      });
    })
  }

}
  

Извините, если многое из этого расплывчато. Я очень новичок в Angular, и это было мое первое приложение.

Любая помощь приветствуется. Пожалуйста, не отмечайте это как плохо воспринятое, поскольку я новичок.

Вы могли бы вызвать другое свойство loaded и установить для него значение true после загрузки данных

 this.breachData.push(data);
this.loading = true;
  

Ваш ngIf будет выглядеть так

 <div *ngIf="loading amp;amp; breachData.length">