如何为自动生成的按钮分配不同的 ID？ (Angular)

Question

下面的源代码显示了 IONIC 页面的一部分。这个页面是关于形状和形状信息的。对于每个形状，页面上显示 2 个按钮：形状属性按钮和 material-信息按钮。我的问题是我是否可以给按钮不同的 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>

如何为自动生成的按钮分配不同的 ID？ (Angular)

How do I assign different IDs to automatically generated buttons? (Angular)

html

javascript

typescript

ionic-framework

angular

更新：