如何避免在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

因為我在角度方面沒有太多經驗，所以如果您有任何想法請幫助我。

Answer 1

更改此：

*ngFor="let catalog of catalogs"

對此：

*ngIf="catalogs[0] as catalog"

Answer 2

試試這個

<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>