Угловой 4 нгфор или нгиф

Question

Я не знаю, что использовать для моей проблемы.

Я получаю некоторую информацию из своего HTTP-запроса, и мне нужно показать предварительное условие из Продукта, когда оно есть. Когда его нет, я хочу, чтобы оно показывало мне статическое сообщение типа <h1>Test</h1>.

Это мой машинописный текст

  public getAllProducts() {
    return new Promise((resolve, reject) => {
      this.http
        .get(
          `${this.kioskservice.getAPIUrl()}products/?apikey=${this.kioskservice.getAPIKey()}&format=json`
        )
        .toPromise()
        .then(
          res => {
              this.config = res.json();
              // Get all product names
            if (this.config && this.config.length) {
              this.names = [];
              for (let i = 0; i < this.config.length; i++) {
                this.names.push(this.config[i]['Name']);
              }
              } 
              // Get all preruiquisites of the products
              if (this.config && this.config.length) {
                  this.prerequisites = [];
                  for (let i = 0; i < this.config.length; i++) {
                      this.prerequisites.push(this.config[i]['Prerequisites']);
                  }
              }
              console.log(this.prerequisites);
            resolve();
          },
          msg => {
            throw new Error("Couldn't get all Bookings: " + msg);
          }
        );
    });
  }
  public getNames() {
    return this.names
    }

  public getPrerequisites() {
    return this.prerequisites
    }
}

Это мой HTML

<li *ngFor="let prerequisite of productservice.getPrerequisites()">
    <i>{{prerequisite}}</i>
</li>
<li *ngFor="let prerequisite of !productservice.getPrerequisites()">
    <i>TEST</i>
</li>

Приведенный выше HTML-код покажет мне все 40 объектов, которые я получаю из моего HTTP-запроса, но только 4 из этих 40 имеют предварительный текст, поэтому я получу 36 пустых <i> элементов и 4 <i> элементов с предварительным текстом в нем.

UPDATE

Изображение массива объектов

Answer 1

Вам нужен только один *ngFor для циклического перемещения по массиву, затем используйте *ngIf, чтобы решить, что показывать.

<li *ngFor="let prerequisite of productservice.getPrerequisites()">
    <i *ngIf="prerequisite">{{prerequisite}}</i>
    <i *ngIf="!prerequisite">TEST</i>
</li>