Saya memiliki persyaratan khusus di Angular4. Saya perlu menampilkan dropdown setelah memilih/mencentang kotak centang dan jika saya menghapus centang pada kotak centang maka dropdown akan disembunyikan. Di bawah ini adalah kode kotak centang.

    <div *ngIf="item.showOperationField">
        <p-checkbox
            value ="inflationaryImpactCheck"
            label="Save for Inflationary Impact"
            name = "calculationSaveInflation"
            [(ngModel)]="item.inflationaryImpact"
            pTooltip="Check the Inflationary Impact box to map this calculation to an index for Inflationary Pressure calculation.">
        </p-checkbox>
    </div>

Setelah mengklik/menghapus centang pada kotak centang

    <div *ngIf="item.showOperationField">
        <p-dropdown
            [style]="{'width':'200px'}"
            [options]="inflation"
            name = "calculationInflation"
            [(ngModel)]="item.selectedInflation">
        </p-dropdown>
    </div>

Tolong bantu saya dan beri tahu saya bagaimana melakukan ini

1
Sandipan Sarkar 16 November 2017, 13:01

3 jawaban

Anda harus memeriksa apakah kotak centang dicentang atau tidak dan tergantung pada pengaturan nilai ngIf untuk dropdown Anda menjadi benar atau salah. Untuk memeriksa apakah kotak centang dicentang: centang kotak

Dalam acara perubahan, Anda harus menetapkan nilai untuk ngIf. Saya harap Anda mengerti :).

0
Sagi 16 November 2017, 13:08

Saya dapat melihat Anda menggunakan PrimeNG.

Aktifkan opsi biner binary="true" di tag p-checkbox Anda.

Dari dokumen :

Nilai boolean tunggal dapat diikat menggunakan properti ngModel juga dengan mengaktifkan opsi biner.

Maka Anda hanya perlu menampilkan p-dropdown Anda jika item.inflationaryImpact benar :

<div *ngIf="item.showOperationField">
  <p-checkbox binary="true" value="inflationaryImpactCheck" label="Save for Inflationary Impact" name="calculationSaveInflation" [(ngModel)]="item.inflationaryImpact" pTooltip="Check the Inflationary Impact box to map this calculation to an index for Inflationary Pressure calculation.">
  </p-checkbox>
</div>

<p-dropdown *ngIf="item.inflationaryImpact" [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

Jika item.inflationaryImpact salah, maka dropdown tidak akan ditampilkan.

Demo

0
Antikhippe 16 November 2017, 13:46

Anda dapat menambahkan acara klik pada elemen kotak centang, Anda memeriksa komponen Anda jika dicentang, Anda menyetel "tampilkan tarik-turun" ke true:

    <p-checkbox
        value ="inflationaryImpactCheck"
        label="Save for Inflationary Impact"
        name = "calculationSaveInflation"
        [(ngModel)]="item.inflationaryImpact"
        (change)="showHideDropDown($event)" /* add this */
        pTooltip="Check the Inflationary Impact box to map this calculation to an index for Inflationary Pressure calculation.">
    </p-checkbox>

Dan di component.ts . Anda

showHideDropDown(event){
 if(event.target.checked){
  this.showDropDown = true;
} else {
   this.showDropDown = false;
}

Dalam tampilan Anda, Anda menunjukkan sembunyikan berdasarkan variabel ini

<div *ngIf="item.showOperationField && showDropDown ">
    <p-dropdown
        [style]="{'width':'200px'}"
        [options]="inflation"
        name = "calculationInflation"
        [(ngModel)]="item.selectedInflation">
    </p-dropdown>
</div>
0
Fateh Mohamed 16 November 2017, 14:07
Terima kasih atas balasan Anda Pak. Saya menambahkan showDropDown: boolean; di component.ts karena gagal kompilasi karena tidak ditemukannya showDropDown. Sekarang kompilasi baik-baik saja. Tetapi di centang/hapus centang kedua kasus itu pergi ke bagian lain. Bisakah Anda membantu saya lebih lanjut?
 – 
Sandipan Sarkar
16 November 2017, 13:58
Coba ini tolong: (ubah)="showHideDropDown($event)" alih-alih (klik)
 – 
Fateh Mohamed
16 November 2017, 14:07
Mencoba. Tapi tidak beruntung. Kali ini tidak terjadi apa-apa. Baik di blok if atau blok lain.
 – 
Sandipan Sarkar
16 November 2017, 14:14
(klik)="showHideDropDown($event)" dan dalam komponen Anda gunakan: event.checked dan bukan event.target.checked
 – 
Fateh Mohamed
16 November 2017, 14:16
Ok saya akan memeriksa dan memberi tahu Anda
 – 
Sandipan Sarkar
16 November 2017, 19:02