下面的源代碼顯示了 IONIC 頁面的一部分。這個頁面是關于形狀和形狀的資訊。對于每個形狀，頁面上會顯示 2 個按鈕：形狀-屬性-按鈕和材料-資訊-按鈕。我的問題是我是否有可能為按鈕提供不同的 ID？
例如：我有一個有 2 個形狀的頁面。Shape1 有兩個按鈕 shape-properties-button 和 material-information-button。和 Shape2 具有相同的 2 個按鈕。我希望 Shape1 和 Shape2 的按鈕材料資訊按鈕的行為不同。
<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>
uj5u.com熱心網友回復：
Jusshape將這兩個按鈕作為第二個引數傳入
<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')
}
}
注意：在您提供的代碼中，除非它們是唯一的id，ngFor否則我看不到創建的意義。
更新：
嘗試
<ion-button [id]="'shape-properties-button-' (j 1)" class="table-button-detailview"
(click)="selectShapeProperty(j)">
Details
</ion-button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/381767.html
標籤：javascript html 有角的 打字稿 离子框架