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

更改此：

=COUNTIF($B$10:$B$1048576,B10)=1

对此：

*ngFor="let catalog of catalogs"

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>

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

2 个答案: