angular-ng-if

问题 This question already has answers here : How to apply filters to *ngFor? (23 answers) Closed 3 years ago . In my Angular 2 app I am wondering if there's a way I can iterate over an array while also filtering on a certain property in the *ngFor block. So the syntax would look something like this: <ng-template *ngFor="let flag['completed === false'] of service.flags"> <span class="standard-flag" [class.hold-flag]="flag?.flagType === 'hold'">Flag </span> </ng-template> So basically the logic is,

问题 This question already has answers here : How to apply filters to *ngFor? (23 answers) Closed 3 years ago . In my Angular 2 app I am wondering if there's a way I can iterate over an array while also filtering on a certain property in the *ngFor block. So the syntax would look something like this: <ng-template *ngFor="let flag['completed === false'] of service.flags"> <span class="standard-flag" [class.hold-flag]="flag?.flagType === 'hold'">Flag </span> </ng-template> So basically the logic is,

问题 In app.component.html , there is condition based template.. My problem is condition in ngif matches(but url changes) , then router-outlet do not change its content but if condition do not matches then content changes. Below is my code app.component.html <app-web-header></app-web-header> <div *ngIf="isAdminComponent"> <app-home ></app-home> </div> <div *ngIf="!isAdminComponent"> <app-user-home></app-user-home> </div> <app-web-footer></app-web-footer> app.component.ts import { Component, Inject

问题 I am trying to write a similar true/false statement, Similar to how the .selected() method would work in Angular typescript . The idea is to show an image if the calculation or *ngIf statement evaluates to True . The code is written in the app.html side Code: <img src="/project/x.png" *ngIf="selectedimage.indexOf(v) !== -1"><a href="{{i['link']}}" target="blank" (click)="update_viewed(z)"> There is a *ngFor statement right before this code, with ;let z = index at the end. The overall code

问题 I'm confused a bit. I need to hide block if result have one of several cases. But seems it not working correctly... <div *ngIf="currentStatus !== 'open' || currentStatus !== 'reopen' "> <p padding text-center class="text-notification">{{message}}</p> </div> It's just appeared with other condition. It doesn't work neither 1 condition nor for 2. Also tried *ngIf="currentStatus !== ('open' || 'reopen') " but it's works ok only for 1 case. 回答1: Besides the redundant ) this expression will always

问题 I'm confused a bit. I need to hide block if result have one of several cases. But seems it not working correctly... <div *ngIf="currentStatus !== 'open' || currentStatus !== 'reopen' "> <p padding text-center class="text-notification">{{message}}</p> </div> It's just appeared with other condition. It doesn't work neither 1 condition nor for 2. Also tried *ngIf="currentStatus !== ('open' || 'reopen') " but it's works ok only for 1 case. 回答1: Besides the redundant ) this expression will always

来源： https://stackoverflow.com/questions/51429248/use-ngif-checking-if-a-string-starts-with-certain-character

问题 I have a clickaway listener as a directive that uses @HostListener put on App.component.ts @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], }) export class AppComponent { constructor(private clickaway: ClickawayService) {} @HostListener("document:click", ["$event"]) documentClick(event: any): void { this.clickaway.target.next(event.target); } } @Directive({ selector: "[clickaway]", }) export class ClickawayDirective implements OnInit,

问题 I'm using Angular 5 and I'm building a list of items with some buttons that filter the list. What I'm struggling to do is show a "No data found" kind of message when one of those filters hide every item of the list. It's basically this: The filter buttons <div padding> <ion-segment [(ngModel)]="filter" (ionChange)="onFilterChange()"> <ion-segment-button value="all"> All </ion-segment-button> <ion-segment-button value="2"> Pending </ion-segment-button> <ion-segment-button value="1"> Confirmed

问题 There's quite good doc of using *ngIf in Angular: https://angular.io/api/common/NgIf But, is that possible to have *ngIf async variable and multiple checks on that? Something like: <div *ngIf="users$ | async as users && users.length > 1"> ... </div> Of course, it's possible to use nested *ngIf, like: <div *ngIf="users$ | async as users"> <ng-container *ngIf="users.length > 1"> ... </ng-container> </div> but it'd be really nice to use only one container, not two. 回答1: Simply do it like this