ngfor

问题 <td *ngFor="let user of userService.users | async"> <div *ngIf="user?.data.apps.details[0].acknowledged as fooIcon"> <img *ngIf="fooIcon === "1" " src="./app/img/icones_sized/tick.png"/> <img *ngIf="fooIcon === "0" " src="nothing_appears"/> </div> I am trying to display an image if my ".acknowledged" is returning "1" and if it return "0" nothing should be displayed...It works with a string but not with a number..I don't really understand why.. 回答1: You should be using *ngIf...else , as <ng

问题 I am trying to dynamically create some HTML using Angular2's NgFor. The problem I seem to be having is that whenever I have an array containing one object. The error I am getting is as follows: "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays". Below is a typical JSON Object (which is one of many Objects in an array) which I am referring to... { "id": "B5EE385D-1D6A-335A-1E94-2F857428A6FB", "type": "workBench",

问题 Working on some array projects but Stuck on point where *ngFor did't accept dynamic value provided by another *ngFor . <table border="2"> <tr> <th rowspan="2">Subject</th> <th colspan="4" *ngFor='#category of json.category_name'>{{category}}</th> <th colspan="4">Overall</th> </tr> <tr> <div *ngFor="#category of json.category_name"> <th *ngFor="#fa of json.total_fa.category">{{fa}}</th> //Not Working </div> </tr> </table> here in the commented line i want to provide json.total_fa.category

问题 I have a series of button created by ngFor which all have custom attributes binded like this: [attr.queryParam1]="button['something'] | clean" (click)="next($event)" Then in the controller: this.service.lvl1Docs($event.target.attributes["queryParam1"].value).subscribe But in chrome I'm getting very inconsistent behaviour, the source seems to reveal the attributes are there and are correct but if I click them I get this error in console and nothing happens: ERROR TypeError: Cannot read

问题 In the loop body in the code below: <ul> <li *ngFor="let article of articles; index as i"> <a>{{ articles[i].title }} -- {{i}}</a> <p>{{ articles[i].body }}</p> <!-- i++ --> <p>{{ i }}</p> </li> </ul> Is there anyway to store the value of i++ at that position, then print out new value of i ? Then, i 's value is updated with the new value and used in the next loop. I would like to loop 2 elements at a time, not just one. It's just like what we can do in Java as below: for (int i = 0; i < 10; i

问题 I'm trying to output html in the following format for an array weekDaysHeaderArr whose length is 42 = 6 x 7. In other words I want to nest every 7 column div elements in a row div (6 total) like so. <div class="row"> <div class="col-md-auto"> <-- **repeated 7 times** </div> </div> <div class="row"> <div class="col-md-auto"> <-- **repeated 7 times** </div> </div> <div class="row"> <div class="col-md-auto"> <-- **repeated 7 times** </div> </div> <div class="row"> <div class="col-md-auto"> <-- *

问题 I am creating a small application, which display a list of People with Name, Surname and Age fields using ngFor. The application has search field, where one can enter a query, and then the list will get replaced with new Entities from the server, based on that query. I created a directive, that highlights letters from the query inside the ngFor row. For example, if I have a person in database that its name is David, and I enter "Dav" inside my query, only entities conatining "Dav" will be

问题 I'm trying to create a simple form with a dynamic number of mat-autocomplete fields. However, in some cases, the inputs' displayed values get lost . Component's script export class AutocompleteSimpleExample { availableItems = [{name: 'item1'}, {name: 'item2'}]; items = [{name: 'item1'}, {}]; addItem() { this.items.push({}); } deleteItem(i: number) { this.items.splice(i, 1); } displayObject(obj) { return obj ? obj.name : null; } } Component's view <form> <mat-form-field *ngFor="let item of

问题 I am a beginner Ionic developer. I am facing some lack logical concept to display the image according to the no of object and determine the rest accordingly. This might be not so clear. SO here the code What I want is suppose if I get 5 image from database rest 15 should come from for loop. <ion-grid> <ion-row no-padding no-margin> <ion-col class="food-item" col-4 *ngFor="let number of [0,1,2,3..20]" (click)="addFood()"> <img src="http://placehold.it/250x200" > <div class="card-title" > <ion

问题 I'm trying to implement something similar to this solution in angular2. I know I can use the slice pipe to limit the number of iterations (similar to limitTo). The thing is, there's no ng-init directive on angular2, and local variables doesn't seem to work in this scenario, and I can't use a variable in the component's level since it should be local to each sub entity (as seen in the example below). <template ngFor #record [ngForOf]="records" #i="index"> <template #showMoreLocal="2" ngFor