Cara menggunakan *ngIf lain?
I'm menggunakan Sudut dan saya ingin menggunakan *ngIf lain (tersedia sejak versi 4) dalam contoh ini:
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>Bagaimana saya bisa mencapai perilaku yang sama dengan ngIf lain ?
Sudut 4 dan 5:
menggunakan yang lain :
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>anda juga dapat menggunakan maka yang lain :
<div *ngIf="isValid;then content else other_content">here is ignored</div>
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>atau kemudian sendirian :
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>Demo:
[Plunker][1]
Rincian:
<ng-template>: adalah Sudut sendiri pelaksanaan <template> tag yang menurut [MDN][2] :
HTML
<template>elemen adalah mekanisme untuk memegang sisi klien konten yang tidak boleh diberikan saat halaman dimuat tapi mungkin selanjutnya akan diturunkan saat runtime dengan menggunakan JavaScript.
Di Sudut 4.x.x Anda dapat menggunakan ngIf dalam empat cara untuk mencapai sederhana jika lain prosedur:
- Hanya Gunakan Jika ****
<div *ngIf="isValid"> Jika isValid benar
- Menggunakan Jika dengan yang Lain (Mohon perhatikan untuk templateName)
<div *ngIf="isValid; lain templateName"> Jika isValid benar
<ng-template #templateName> Jika isValid adalah palsu
- Menggunakan Jika dengan Kemudian (Mohon perhatikan untuk templateName)
<div *ngIf="isValid; kemudian templateName"> Di sini adalah tidak pernah menunjukkan
<ng-template #templateName> Jika isValid benar
- Menggunakan Jika dengan Kemudian dan lain-Lain
<div *ngIf="isValid; kemudian thenTemplateName lain elseTemplateName"> Di sini adalah tidak pernah menunjukkan
<ng-template #thenTemplateName> Jika isValid benar
<ng-template #elseTemplateName> Jika isValid adalah palsu
Tip: ngIf mengevaluasi ekspresi dan kemudian membuat kemudian atau lagi template di tempatnya ketika ekspresi truthy atau falsy masing-masing. Biasanya:
- kemudian template inline template ngIf terikat kecuali untuk nilai yang berbeda.
- lagi template kosong kecuali terikat.
Untuk bekerja dengan diamati, ini adalah apa yang biasanya saya lakukan untuk tampilan jika diamati array yang terdiri dari data.
<div *ngIf="(observable$ | async) as listOfObject else emptyList">
<div >
....
</div>
</div>
<ng-template #emptyList>
<div >
...
</div>
</ng-template>
"bindEmail" ini akan memeriksa email yang tersedia atau tidak. jika email ada dari Logout akan menunjukkan jika tidak Login akan menunjukkan
<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>
Sintaks untuk ngIf/Lain
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>
Menggunakan NgIf / Lain/ Maka eksplisit sintaks
Untuk menambahkan template kemudian kita hanya perlu mengikat untuk template secara eksplisit.
<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div>
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>
Diamati dengan NgIf dan Async Pipa
ngif ekspresi nilai yang dihasilkan tidak hanya akan boolean true atau false
jika ekspresi adalah hanya sebuah objek, itu masih mengevaluasi sebagai truthiness.
jika objek tidak terdefinisi, atau tidak ada, maka ngif akan mengevaluasi hal itu sebagai kepalsuan.
penggunaan umum adalah jika sebuah benda bermuatan, ada, kemudian menampilkan isi dari objek ini, jika tidak, tampilan "loading..........".
<div *ngIf="!object">
Still loading...........
</div>
<div *ngIf="object">
<!-- the content of this object -->
object.info, object.id, object.name ... etc.
</div>contoh lain:
things = {
car: 'Honda',
shoes: 'Nike',
shirt: 'Tom Ford',
watch: 'Timex'
};
<div *ngIf="things.car; else noCar">
Nice car!
</div>
<ng-template #noCar>
Call a Uber.
</ng-template>
<!-- Nice car ! -->anthoer contoh:
<div *ngIf="things.car; let car">
Nice {{ car }}!
</div>
<!-- Nice Honda! -->
Di Sudut 4.0 if..else sintaks ini cukup mirip dengan conditional operator di Jawa.
Di Jawa yang anda gunakan untuk "kondisi?stmnt1:stmnt2".
Di Sudut 4.0 anda menggunakan *ngIf="kondisi;kemudian stmnt1 lain stmnt2".
Untuk Sudut 8
Sumber Link dengan contoh-Contoh
export class AppComponent {
isDone = true;
}*1) ngIf**
<div *ngIf="isDone">
It's Done!
</div>
<!-- Negation operator-->
<div *ngIf="!isDone">
It's Not Done!
</div>*2) ngIf dan Lain**
<ng-container *ngIf="isDone; else elseNotDone">
It's Done!
</ng-container>
<ng-template #elseNotDone>
It's Not Done!
</ng-template>*3) ngIf, Maka, dan lain-Lain**
<ng-container *ngIf="isDone; then iAmDone; else iAmNotDone">
</ng-container>
<ng-template #iAmDone>
It's Done!
</ng-template>
<ng-template #iAmNotDone>
It's Not Done!
</ng-template>
Anda dapat Menggunakan <ng-wadah> dan <ng-template> untuk Mencapai hal Ini
<ng-container *ngIf="isValid; then template1 else template2"></ng-container>
<ng-template #template1>
<div>Template 1 contains</div>
</ng-template>
<ng-template #template2>
<div>Template 2 contains </div>
</ng-template>Anda dapat menemukan Stackblitz Live demo di bawah ini
Berharap Ini akan membantu ... !!!
Ada dua kemungkinan untuk digunakan jika kondisi pada tag HTML atau template:
- *ngIf arahan dari CommonModule, pada HTML tag;
- if-else
Anda juga dapat menggunakan Javascript pendek ternary operator bersyarat ? di sudut seperti ini:
{{doThis() ? 'foo' : 'bar'}}atau
<div [ngClass]="doThis() ? 'foo' : 'bar'">
<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font"> </div>
<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>
Aku tahu ini sudah lama, tapi ingin menambahkan jika itu membantu. Cara saya pergi tentang dengan adalah untuk memiliki dua bendera dalam komponen dan dua ngIfs untuk sesuai dua bendera.
Itu sederhana dan bekerja dengan baik dengan bahan seperti ng-template dan bahan yang tidak bekerja dengan baik bersama-sama.
Di Sudut 4, 5 dan 6
Kita hanya dapat membuat template referensi variabel [2] dan link yang ke kondisi lain dalam *ngIf directive
Kemungkinan Sintaks [1] adalah:
<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>
<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>
<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>
<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>DEMO: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html
Sumber:
