angular - 如何使用 Angular 11 在 ngFor 中设置临时变量？

问题描述

我有以下 html 调用这些：块getMetaForXXX内的方法多次ngFor。我觉得这不是一个好的做法，并希望有一种方法可以简化这个逻辑。

  <div *ngFor="let i of state.data" class="carousel-cell" tabindex="-1">
    <div class="carousel-cell-primary">
      <span class="large">{{getMetaForVendor(i.vendor).display}}</span>
      <span class="large">{{i.name}}</span>
      <span>{{i.issued | monthYear}} &mdash; {{i.expiry | monthYear}}</span>
      <span>Credential ID: {{i.credential || "Not Applicable"}}</span>
      <span>
        <mat-slider
          aria-label="units"
          [disabled]="true"
          [max]="4"
          [min]="0"
          [value]="getMetaForLevel(i.level).rank"
        >
        </mat-slider>
        {{getMetaForLevel(i.level).display}}
      </span>
    </div>
  </div>

组件.html

  state: CertificationState;

  getMetaForLevel(value: string): MetaData {
    return this.state.meta.levels.find(meta => meta.name === value);
  }

  getMetaForVendor(value: string): MetaData {
    return this.state.meta.vendors.find(meta => meta.name === value);
  }

组件.ts

export interface CertificationState {
  data: Certification[];
  meta: CertificationMeta;
}

export interface Certification {
  id: number;
  credential: string;
  description: string;
  expiry: MonthYear;
  issued: MonthYear;
  level: string,
  name: string;
  vendor: string;
}

export interface CertificationMeta {
  levels: MetaData[];
  vendors: MetaData[];
}

export interface MetaData {
  name: string;
  display: string;
  description: string;
  rank: number;
}

模型.ts

{
  "data": [
    {
      "id": "1",
      "name": "Cloud Practitioner",
      "credential": "1234",
      "description": "Lorem ipsum dolor sit amet.",
      "expiry": {
        "month": 7,
        "year": 2023
      },
      "issued": {
        "month": 12,
        "year": 2018
      },
      "level": "FOUNDATIONAL", <-- correlates to meta.levels.name
      "vendor": "AWS"          <-- correlates to meta.vendors.name
    }
    ...
  ],
  "meta": {
    "levels": [
      {
        "name": "FOUNDATIONAL",
        "description": "lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis purus",
        "display": "Associate",
        "rank": 2
      }
      ...
    ],
    "vendors": [
      {
        "name": "AWS",
        "display": "Amazon Web Services (AWS)"
      }
      ...
    ]
  }
}

示例模型数据

标签： angulartypescript

创建模板变量的一种方法是使用*ngIf. 在下面的代码中，该指令应用于循环div内的元素：*ngFor

为确保*ngIf条件为真，创建并评估一个对象
表达式返回的值被赋值给对象的一个属性
该对象被分配给一个新的模板变量，metaForLevel
然后，您可以在循环迭代中多次使用该变量

<div *ngFor="let i of state.data" ...>
  <div *ngIf="{data: getMetaForLevel(i.level)} as metaForLevel" ...>
    ...
    <span>
      <mat-slider ... [value]="metaForLevel.data.rank"></mat-slider>
      {{ metaForLevel.data.display }}
    </span>
  </div>
</div>

*ngFor如果循环中不存在或不需要 HTML 容器，则*ngIf可以将条件应用于ng-container元素。

angular - 如何使用 Angular 11 在 ngFor 中设置临时变量？

问题描述

解决方案

推荐阅读