ngfor | 易学教程

Dynamically assign element id inside ngFor

阅读更多关于 Dynamically assign element id inside ngFor

问题 I'm new to Angular 2, and i'm trying to give a dynamically assigned id for a div inside a *ngFor. I would like the divs to be called 'wave1, wave2, wave3' etc. <li *ngFor="let episode of episodes; let i = index"> <div id="wave{{i}}"></div> </li> However, this throws the following error: ERROR DOMException: Failed to execute 'querySelector' on 'Document': '#wave[object Object]' is not a valid selector. I haven't been able to find an answer to this for Angular 2 yet on stackoverflow. Apologies

error display in *ngfor json array object

阅读更多关于 error display in *ngfor json array object

问题 when fetching json array object from rest api and trying to display in ngfor failed with the reason error EXCEPTION: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. in [indexes in HomeComponent@5:37] Code import {Component} from 'angular2/core'; import {HomeService} from './home.services'; import {Index} from './index'; @Component({ selector: 'home-app', providers: [HomeService], template: ` <section class=

Angular create a recursive loop in template to render comments tree

阅读更多关于 Angular create a recursive loop in template to render comments tree

Hi I want to render the comments of my applications as comments and its reply's but I dont have idea on how to do it with my data: My data looks like: "comments": [ { "id": "30", "content": "Comment 1", "parent": "0", }, { "id": "31", "content": "Comment 2", "parent": "0", }, { "id": "32", "content": "comment 3", "parent": "0", }, { "id": "33", "content": "sub comment 1-1", "parent": "30", }, { "id": "34", "content": "sub comment 2-1", "parent": "31", }, { "id": "35", "content": "sub sub comment 1-1-1", "parent": "33", }, { "id": "36", "content": "sub comment 1-2", "parent": "30", } ] where

Filtering items by value inside ngFor without writing Pipes

阅读更多关于 Filtering items by value inside ngFor without writing Pipes

问题 I have the following Component: class MyComponent { public mode = 'v'; readonly modes = ['v', 'a', 'd']; .... } Now I want to use an ngFor to display buttons for all modes in modes except the current mode stored in mode . I have the following code: <button *ngFor="let othermode of modes"> {{ othermode }} </button> I always want two buttons to be displayed, containing the remaining 2 modes. I tried this: <button *ngFor="let othermode of modes.filter(elem => elem !== this.mode)"> {{ othermode }

angular viewChild for dynamic elements inside ngFor

阅读更多关于 angular viewChild for dynamic elements inside ngFor

问题 My template has something like this: <div *ngFor="let data of array"> <div #div></div> </div> is there a way for me to name each div differently using the #? And if so, how can I access them later in my TS file? by the way, what are these # called? I cant search for them since I have now idea what these are (I just know what they're used for) 回答1: As @Commerical Suicide mentioned you cannot set the references dynamically. The #div is called template reference variable. You can access your

how can I create a nested, recursive table that can drill down x levels in Angular

阅读更多关于 how can I create a nested, recursive table that can drill down x levels in Angular

问题 I need to make a table with data with nested subtasks. I need to make this table recursive. There is a lot of literature about ngFor recursively showing data, but not in a table format. There are a lot of things that make tables harder to work with(e.g. using div tags outside of td tags, etc.) here is a stackblitz of what I got so far. https://stackblitz.com/edit/angular-xk9nw6?file=src%2Fapp%2Ftable%2Ftable.component.html As you can see, I can only drill down a single level before I

Angular 2 show/hide wrap tag in ngFor over even/odd items

阅读更多关于 Angular 2 show/hide wrap tag in ngFor over even/odd items

问题 I have 2 column list. Is it possible to add if array element is odd element and to close tag if it is even element. <ng-container ngFor="let item of items; let odd=odd;">  <div class="item-wrapper">  <div class="item">{{item.name}}</div>  </div>  </ng-container> In knockout.js i can do it like this:   <div class="item-wrapper">  <div class="item">{{items.name}}</div> <!--

Angular 5 display *ngfor horizontally

阅读更多关于 Angular 5 display *ngfor horizontally

问题 i'm building my first angular app using latest version and i need some help to display some informations in a specific position. app.component.ts: socials = [ { name: 'Github', icon: 'fa fa-github fa-2x', link: 'https://www.github.com/..'; }, { name: 'Twitter', icon: 'fa fa-twitter fa-2x', link: 'https://www.twitter.com/..'; }, { name: 'Keybase', icon: '', link: 'https://keybase.io/..'; }, ... .. . app.component.html: <div class="footer"> <div class="row"> <div class="col-sm-12 links" *ngFor=

Angular2 doesn't detect changes in Array

阅读更多关于 Angular2 doesn't detect changes in Array

问题 I am on an Ionic2 / Angular2 project. There I have a *ngFor="let item of items | async | customPipe" in my code. The async is because items is an Observable<Item[]> . My customPipe is working fine on the first run. But when I make any change to one if the items that would filter it out through my customPipe it is still shown. What's the problem? Is the *ngFor only run once? Or do I have to force a DOM-update? Thanks for any help. 回答1: According to Angular2 pipe docs: Angular executes a pure

How can I use Angular4 *ngFor to create a data table?

阅读更多关于 How can I use Angular4 *ngFor to create a data table?

问题 I am working on a project using Angular4 to get data from an API and using*ngFor to render a data table. Because I still have more aips with same structure, I want to use (key, value) pair to display them. In AngularJS, I have correctly rendered the table like this:  <table> <thead> <tr> <th ng-repeat="(key, value) in data.items[0]"> {{key}} </th> </tr> </thead> <tbody> <tr ng-repeat ="data in data.items > <td ng-repeat="(key,value) in data">{{ value }}</td> <