如何为自动生成的按钮分配不同的 ID？ （角度）

Question

下面的源代码显示了 IONIC 页面的一部分。这个页面是关于形状和形状的信息。对于每个形状，页面上显示 2 个按钮：形状属性按钮和材料信息按钮。我的问题是我是否可以为按钮提供不同的 ID？

例如：我有一个包含 2 个形状的页面。 Shape1 有两个按钮 shape-properties-button 和 material-information-button。 和 Shape2 具有相同的 2 个按钮。 我希望 Shape1 和 Shape2 的按钮 material-information-button 表现不同。

<ion-row class="datatable-content" *ngFor="let shape of shapeGroup.shapes; index as j">
        <ion-row class="content-row">
          <ion-col size="2">
            {{shape.externalid}}
          </ion-col>
          <ion-col size="6">
            {{shape.shapeName}}
          </ion-col>
          <ion-col size="4">
            {{shape.shapeType}}
          </ion-col>
        </ion-row>
        <ion-row class="options-header">
          <ion-col size="6" size-xs="6" size-sm="6" size-md="6" size-lg="6" size-xl="6">
            <ion-buttons>
              <ion-button id="shape-properties-button" class="table-button-detailview"
                (click)="selectShapeProperty(j)">
                Details
              </ion-button>
            </ion-buttons>
          </ion-col>
          <ion-col size="6" size-xs="6" size-sm="6" size-md="6" size-lg="6" size-xl="6">
            <ion-buttons>  
              <ion-button id="material-information-button" class="table-button-detailview" 
                (click)="selectBridgeInformation(j)">
                Brückeninformationen
              </ion-button>
            </ion-buttons>
          </ion-col>         
        </ion-row>
        <ion-row *ngIf="shouldShapePropertyBeShown(j)" size="12" class="content-subrow" id="shape-properties" >
          <ion-col size="4" *ngFor="let property of shape.shapeProperties" style="margin-top: 8px; background-color:#f9efef; ">
           <div class="detailView__label">{{property.propertyName}}</div> 
           <div class="detailView__text"> {{property.propertyValue}}</div>
          </ion-col>
        </ion-row>
        <ion-row *ngIf="shouldBridgeBeShown(j)" size="12" class="content-subrow" id="shape-properties" >
          <ion-col size="12" size-xs="12" size-sm="12" size-md="12" size-lg="12" size-xl="12">
              <ion-row>

Answer 1

只需在这两个按钮中传递shape 作为第二个参数

<ion-button id="shape-properties-button" class="table-button-detailview"
       (click)="selectShapeProperty(j,shape)">
           Details
</ion-button>

并在方法中检查形状类型并相应地执行操作。

selectShapeProperty(index,shapeObj){
 switch (shapeObj.shapeType){
   cases 'Circle':
     do something;
   case ....
      ....
   default:
     console.error('unknown shape')
 }

}

注意：在您提供的代码中，我认为在 ngFor 中创建 id 没有意义，除非它们是唯一的。

---

更新：

试试

 <ion-button [id]="'shape-properties-button-'+(j+1)" class="table-button-detailview"
                (click)="selectShapeProperty(j)">
                Details
              </ion-button>