web-dev-qa-db-ja.com

Angular-ボタンをクリックした後、テーブルの行の背景色を変更します

試したボタンをクリックした後、選択した行の背景色を変更したいが、すべての行の色を変更したい。これは同様のコードです。

HTML

<tr *ngFor="let data of (datas$ | async) | filter:authService.filter | paginate: config | orderBy: key : reverse" [ngClass]="{'data-selected':isSelected}">
    <td>{{data.id}}</td>
    <td>{{data.text}}</td>
    <td>
       <a class="mr-3" (click)="delete(data.id)"><i class="fa fa-remove"></i>
            Remove
       </a>
    </td>
</tr>

TS

delete(postId) {
    this.isSelected=true;
    const ans = confirm('TEXT TEXT '+dataid);
    if (ans) {
      this.dataService.deleteData(postId).subscribe((data) => {
        if(data) {
          this.showSuccessDelete();
        } else {
          this.showError();
        }
        this.isSelected=false;
        this.loadDatas();
      });
    }
  }

CSS

.data-selected{
  background-color: #e9eaea;
}

本当にありがとう

cssangularhtml-tableangular8
5
Toriga

コンポーネントクラスに属性を追加して、それをselectedRowと呼ぶと、data.idを取得できます。

selectedRow: number; 

delete(postId,numeroDeposito) {
this.selectedRow = postId; 
const ans = confirm('TEXT TEXT '+dataid);
if (ans) {
  this.dataService.deleteData(postId).subscribe((data) => {
    if(data) {
      this.showSuccessDelete();
    } else {
      this.showError();
    }
    this.isSelected=false;
    this.loadDatas();
  });
}

}

次に、trタグで[ngClass]="{'data-selected': selectedRow === data.id}"を使用します。

1
a bouchenafa

次のアプローチを取ることもできます。

ワーキングデモ

[class.data-selected]="data.isSelected"

クリックイベント。

(click)="data.isSelected = true";
1
Adrita Sharma

別のisSelected変数を宣言するのではなく。あなたはdataオブジェクトのプロパティとして導入する必要があります。例：

{
    id: 1,
    name: 'AA',
    isSelected: false
}

次に、クリックすると、data.idをパラメーターとしてdelete関数が呼び出されたときに、関数を切り替えることができます。

deleteMe(id: string) {
    this.data.map(x => x.isSelected = false);
    this.data.find(x => x.id === id).isSelected = true;
}

そしてhtmlで

<tr *ngFor="let item of data" [ngClass]="{selected: item.isSelected}">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td><button (click)="deleteMe(item.id)">delete me</button></td>
</tr>

最小値は 例 です。

0
Iftifar Taz

これを実現するには、条件付きスタイリングを使用できます。

<div [className]="( checkSelectedRow(i) ? 'example-class' : 'other-class'"></div>

TypeScriptファイル：

checkSelectedRow(rowNumber) : boolean {  
    for(int j=0; j<rows.length; j++){
       if(j==i){
         rows[i]["selected"]=true; return true;
       }; 
    } 
    return false;
}
0
Sami HK

これは、このように選択された行の配列を作成することで解決できます

  deleteList = []

次に、削除をクリックすると、リスト内のアイテムのIDをプッシュします

  delete(id) { 
    this.deleteList.Push(id)
  }

次に、テンプレートでngClassディレクティブを使用して、アイテムIDがリストに含まれている場合にクラスを設定します

<tr *ngFor="let data of list" [ngClass]="{'data-selected':deleteList.includes(data.id)}">
   ....
</tr>

デモ????????

0
malbarmavi