angular - 如何避免在 Angular 中使用 *ngFor？

Question

我有这部分代码:

<div class="footer" *ngIf="isPartner && canAddNewLang && !deletion"
      fxLayout="row" fxLayout.xs="row"
      fxLayoutAlign="center center" fxFlex="100">
      <div class="add-lang"
      *ngFor="let catalog of catalogs"
        routerLink="/partner/my-apps/{{catalog.appId}}/add-new-lang"
        >
        <div class="card__container-header-button" >
          <div class="card__icon-wrapper">
            <svg class="card-button-sml" width="8"
              height="8" viewBox="0 0 8 8"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M6.99513 3.1C7.21913 3.1 7.40579 3.17467 7.55513 3.324C7.70446 3.464 7.77913 3.646 7.77913 3.87C7.77913 4.094 7.70446 4.28067 7.55513 4.43C7.40579 4.57 7.21913 4.64 6.99513 4.64H5.03513V6.474C5.03513 6.73533 4.94646 6.95 4.76913 7.118C4.60113 7.286 4.38646 7.37 4.12513 7.37C3.86379 7.37 3.64446 7.286 3.46713 7.118C3.29913 6.95 3.21513 6.73533 3.21513 6.474V4.64H1.29713C1.07313 4.64 0.886458 4.56533 0.737125 4.416C0.587792 4.26667 0.513125 4.08 0.513125 3.856C0.513125 3.632 0.587792 3.45 0.737125 3.31C0.886458 3.17 1.07313 3.1 1.29713 3.1H3.21513V1.014C3.21513 0.752667 3.29913 0.538 3.46713 0.37C3.64446 0.202 3.86846 0.118 4.13913 0.118C4.40046 0.118 4.61513 0.202 4.78313 0.37C4.95113 0.538 5.03513 0.752667 5.03513 1.014V3.1H6.99513Z"
                fill="white" />
            </svg>
          </div>
          <span class="btn__text">
            {{ 'apps.add-new-language' | translate }}
          </span>
        </div>
      </div>
      <!-- undo delete -->
     </div>

我在其中显示一个按钮并将用户定向到一个路径，这就是问题所在。我有

  *ngFor="let catalog of catalogs"
    routerLink="/partner/my-apps/{{catalog.appId}}/add-new-lang"

我正在使用

routerLink="/partner/my-apps/{{catalog.appId}}/add-new-lang"

将用户引导到正确的路径，目前我需要目录我不知道除了使用 for 之外的其他方法，但是通过这种方式，我将按钮显示了 3 次，这绝对是错误的。所以目录是

 @Input() catalogs: IAppInfoModel[];

和 IAppInfoModel

export interface IAppInfoModel {
  appIdToSearch: number;
  appId: number;
  ..............
}

通过 console.log (this.catalogs); 我有:目录

catalog-group.component.ts:35 (3) [{…}, {…}, {…}]
catalog-group.component.ts:35 (3) [{…}, {…}, {…}]
catalog-group.component.ts:35 (2) [{…}, {…}]
catalog-group.component.ts:35 (3) [{…}, {…}, {…}]
catalog-group.component.ts:35 (2) [{…}, {…}]
catalog-group.component.ts:35 (2) [{…}, {…}]
catalog-group.component.ts:35 (2) [{…}, {…}]
catalog-group.component.ts:35 (2) [{…}, {…}]
catalog-group.component.ts:35 (2) [{…}, {…}]

这是其中一个具有属性的外观:

allVersions: [{…}]
appId: 7
appIdToSearch: 40
appMedias: []
bookMarked: false
companiesSize: []
companyId: undefined
companyName: "testCompany 2.0"
deletionRequested: false
easyUseScore: null
enabled: true
featureScore: null
features: []
featuresSummary: []
hasLogo: false
integratedApps: []
languageId: 2
pricing: []
supportedDevices: []
supportedLanguages: []
totalScore: null
typesOfSoftware: [{…}]
valueMoneyScore: null
vendor: "testCompany 2.0"
versionAppDescription: undefined
versionAppName: "sdfsdf"
versionAppWebsite: undefined
versionId: 200
versionLogoExtention: undefined
versionNumber: 1
versionShortAppDescription: null
versionStatusId: 1
versionUpdatedAt: undefined

为了我在 Angular 方面没有太多经验，所以如果您有任何想法，请帮助我。

Answer 1

尝试一下

<div *ngFor="let catalog of catalogs; let i = iindex as i; first as isFirst">
    <div *ngIf="isFirst" class="row" routerLink="/partner/my-apps/{{catalog.appId}}/add-new-lang">

</div>