Saya memiliki array item yang diambil dari database. Daftar ini berubah terus-menerus sehingga daftar yang ditampilkan pada html berubah secara dinamis. Saya hanya ingin menyorot item yang dipilih dari daftar tetapi seluruh daftar disorot saat dipilih.

Berikut ini adalah kode HTML di sudut 2

<div class="list-group " *ngFor="let year of years">
              
            <a routerLink="records" routerLinkActive="active" class="list-group-item list-group-item-action">
                <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year}}</a>
                
        </div>

Ini adalah bagaimana daftar dilihat setelah memilih item

1
Akhilesh Pothuri 28 Oktober 2019, 09:58

1 menjawab

Jawaban Terbaik

Ubah model Anda sehingga objek Anda berisi id tahun, judul, dan tahun yang dipilih. Kemudian miliki array tahun itu dan klik buat tahun itu dipilih dan hapus yang lain. Kemudian di ngCLass, modifikasi css dan atur kelas aktif dengan css yang sesuai seperti opacity, color dll.

<div class="list-group ">
<a *ngFor="let year of years" routerLink="records" routerLinkActive="active" class="list-group-item list-group-item-action">
  <mdb-icon (click)="setSelected(years, id)" fas icon="table" class="mr-3" [ngClass]="{ 'active': year?.selected }"></mdb-icon>{{year?.title}}</a>
 </div>

Dan fungsinya menjadi:

    setSelected(years: Year[], id: number) {

    if (!years) {
    return;
    }

    this.years.map( year => {

      return {
       ...year,
       selected: (year.id === id)
      });
    }
0
Miroslav Maksimovic 2 November 2019, 12:28