单击按钮后隐藏整行

时间:2019-01-29 19:37:14

标签: typescript ionic3

我正在使用带有ngFor循环的离子卡。所有卡都包含带有反馈按钮的行。如果要单击此卡的按钮,我想隐藏整行。我的方法行不通。谢谢您的提示。

错误

No value accessor for form control with unspecific name attribute

HTML

<ion-card class="card card-ios" *ngFor="let card of cardArray; let i = index">
 ...
<ion-row [(ngModel)]="feedBackButtons[$i + 1]">
    <ion-col>
      <button class="thumbButtons" ion-button icon-start clear small (click)="tileViewThumbUp(i, card.category, card.coveredText)">
            <ion-icon name="ios-thumbs-up"></ion-icon>
            <div>{{"Helpful" | translate }}</div>
          </button>
    </ion-col>
    <ion-col>
      <button class="thumbButtons" ion-button icon-start clear small (click)="tileViewThumbDown(i, card.category, card.coveredText)">
            <ion-icon name="ios-thumbs-down"></ion-icon>
            <div>{{"NotHelpful" | translate }}</div>
          </button>
    </ion-col>
</ion-row>
...

JS

feedBackButtons: boolean = true;

...

tileViewThumbUp(index, category, coveredText) {
   this.feedBackButtons[index] = false;
}
tileViewThumbDown(index, category, coveredText) {
   this.feedBackButtons[index] = false;
}

1 个答案:

答案 0 :(得分:0)

好的,我通过这种方法解决了

    <ion-row [hidden]="card.hideFeedback">
    <ion-col>
      <button class="thumbButtons" ion-button icon-start clear small (click)="card.hideFeedback = !card.hideFeedback;tileViewThumbUp(card.category, card.coveredText)">
            <ion-icon name="ios-thumbs-up"></ion-icon>
            <div>{{"Helpful" | translate }}</div>
          </button>
    </ion-col>
    <ion-col>
      <button class="thumbButtons" ion-button icon-start clear small (click)="card.hideFeedback = !card.hideFeedback;tileViewThumbDown(card.category, card.coveredText)">
            <ion-icon name="ios-thumbs-down"></ion-icon>
            <div>{{"NotHelpful" | translate }}</div>
          </button>
    </ion-col>
  </ion-row>