ngfor

问题 I'm trying to use a jQuery plugin which replaces the default scrollbar inside some dynamic elements in Angular 2. These elements are created using an ngFor loop, that is I cannot attach the jQuery events to the elements these are created. The application, at some point, mutates an Observable object which iscycled inside the ngFor in order to render the view. Now, I would like to know when Angular finishes to draw my elements so that I can run the jQuery plugin. I don't want to include any

问题 I want collapse and expand like accordion my json object details.I already used for loop and *ngFor directive. toggleCollapse(){ this.isCollapsed=!this.isCollapsed; } <div class='wrapper' *ngFor="let t of response.articles"> <div class='img-wrapper' *ngIf="isCollapsed"> <img src='{{t.imgUrl}}' /> </div> <div class='text-wrapper'> <h2>{{t.title}}</h2> <h5>{{t.description}}</h5> <div *ngIf="!isCollapsed "> <h5>{{t.content}}</h5> </div> <button *ngIf="isCollapsed" type="button" (click)=

问题 I'm doing a project and I keep getting the error "Error trying to diff '[object Object]'. Only arrays and iterables are allowed" I looked up the error and there is two ways to do it, change the incoming data(no possible) or "transform the object in my component". I need to do the latter, but i can't find any way how to as I'm only a student. Here's some of the relevant code: //characters.ts apiUrl = 'https://swapi.co/api/people'; getUsers() { return new Promise(resolve => { this.http.get(this

问题 i´m new to Angular 2 in Typescript.I want to access D and G of my JSON with NgFor. Is there a way to access the elements? [ { "A":"B", "C":{ "D": ["E","F"], "G": ["H"] } } ] I also createt a Plunker: Plunker 回答1: ngFor can't iterate over an object's keys out of the box. You must handle that yourself. Pipes work well. Example: Updated Plunkr @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value: any, args?: any[]): any[] { let keys = Object.keys(value), data =

问题 I am trying to create a legend/key for a pie chart with a small circle with the same color in the graph and text next to it. However, this is the error that I am getting when I try to do this: "Template parse errors: Can't bind to 'fill' since it isn't a known native property" Below is my code: <svg *ngFor="let item of items;" width="250" height="75"> <circle cx="50" cy="50" r="20" fill={{item.color}} /> <text x="100" y="50">{{item.name}}</text> </svg> item.color and item.name are both

问题 I'm pretty new in angular2 and I'm trying to make a small angular component called " grid " that simply rearranges its content using transclusion. Its template grid component template (grid.component.ts) <div class="grid"> <div class="row"> <div class="col-xs-4"> <ng-content select="[grid-item-index=0]"></ng-content> </div> <div class="col-xs-4"> <ng-content select="[grid-item-index=1]"></ng-content> </div> <div class="col-xs-4"> <ng-content select="[grid-item-index=2]"></ng-content> </div> <

问题 I am using ngFor to loop 8 json objects and I want not only to loop the values but also I want to count the number of looping values and display the number. For example, if json value is Content:{ 0:"Content1", 1:"Content2", 2:"Content3", 3:"Content4", 4:"Content5", 5:"Content6", 6:"Content7", 7:"Content8" } I not only want to display looping values of 'Content', but I also want to count them so that the result could be this below. 1 <- counting Content1 2 Content2 3 Content3 4 Content4 5

问题 Below is angular2 simple front end page:: <table class="table"> <tr> <th>title</th> <th>description</th> </tr> <tr *ngFor="let notes of Note"> <td>{{notes.title}}</td> <td>{{notes.body}}</td> </tr> </table> Below is component code:: in which Note is having export class Note { noteId: number ; title: String ; body: String ; color: String ; isArchive: boolean ; isPinned: boolean ; isTrash: boolean ; } notes:Note[]=[]; ngOnInit() { this.getAllNotes(); } //get all anotes getAllNotes(){ this

问题 Currently I'm working in a view where I have to dynamically create HTML elements. I'm creating the HTML elements with *ngFor directive bounded with an Array. I need to refer the new HTML element with JQuery selector after push a new object into the Array, but the HTML element is not rendered yet. How can I trigger a function just after the HTML element is ready ? Thanks in advance. 回答1: You can follow below steps inside the component:- 1) On ngOnInit(), you can write logic which is

问题 I'm using *ngFor to iterate some data like this: <div *ngFor="let d of [1, 2, 3]"> {{d}} </div> Everything is fine and I got the result as expected: <div> 1 </div> <div> 2 </div> <div> 3 </div> Then, I wondered if I use a function instead of {{d}} , so I wrote a function: protected logAndReturn(item) { console.log(item); return item; } and I used it: <div *ngFor="let d of [1, 2, 3]"> {{logAndReturn(d)}} </div> I got the same rendered HTML result as the first code, but console output wasn't my