在特定按钮上单击在ionic3中添加类

fruv7luv 于 2023-04-10 发布在 Ionic

关注(0)|答案(1)|浏览(130)

我有一个情况，我有多个记录，我在*ngFor循环中使用，所以每条记录都有一个按钮，我试图做的是onclick改变按钮的背景，使其看起来像是点击的

<div class="main" *ngFor="let data of fetched_info; let i=index">
    <ion-grid no-padding no-margin>
        <ion-row no-padding no-margin class="row">
            <ion-col col-4 no-padding no-margin> 
                <button ion-button small icon-start color="secondary"
outline (click)="shortlist($event,data[i].username)" class="">
                    <ion-icon ios="ios-star-outline" md="md-star-outline"></ion-icon>
                    Shortlist
                </button>
            </ion-col>

        </ion-row>
    </ion-grid>
</div>

onclick of shortlist() function我想让它发生

ionic-framework

来源：https://stackoverflow.com/questions/55278903/on-specific-button-click-add-a-class-in-ionic-3

1条答案

按热度按时间

ewm0tg9j1#

你可以这样试试

超文本标记语言

<div class="main" *ngFor="let data of fetched_info; let i=index">
 <ion-grid no-padding no-margin>
     <ion-row no-padding no-margin [ngClass]="backgroundColorFlag[i] == true ? 'backgroundColorClass' : 'backgroundColorNormalClass' " class="row">
       <ion-col col-4 no-padding no-margin> 
         <button ion-button small icon-start color="secondary"
           outline (click)="shortlist($event,data[i].username, i)" class="">
           <ion-icon ios="ios-star-outline" md="md-star-outline"></ion-icon>
            Shortlist
         </button>
       </ion-col>
     </ion-row>
 </ion-grid>
</div>

TS

backgroundColorFlag: any[] = [];
    shortlist(data, i) {
      this.backgroundColorFlag[i] != this.backgroundColorFlag;
    }
    functionWhichHavefetched_info() {
     for (let i = 0; i < fetched_info.length; i++) {
           this.backgroundColorFlag[i] = false // default we are setting value false and on click we set this flag value true
      }
    }

你需要创建一个像这样的类backgroundColorClass和backgroundColorNormalClass，并通过使用标志backgroundColorFlag添加或删除类，希望它能帮助你解决这个问题

赞(0）回复(0）举报 2023-04-10

我来回答

在特定按钮上单击在ionic3中添加类

1条答案

相关问题

热门标签

最新问答