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将显示我从HTTP请求中收到的所有40个对象，但这40个中只有4个具有先决条件文本，因此我将获得36个空<i>个元素和4个<i>元素包含必备文本。

更新

Image of Array of Objects

Answer 1

您只需要一个*ngFor循环数组，然后使用*ngIf来决定要显示的内容。

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

Angular 4 ngfor或ngif

1 个答案: