ngfor

Angular2 - passing ngFor item into a pipe as a parameter?

岁酱吖の 提交于 2019-12-20 03:13:19
问题 Im trying to pass an ngFor item into a pipe as a paramter but get an error: Exception: Call to Node module failed with error: Error: Template parse errors: TypeError: Cannot read property 'toUpperCase' of undefined ("{{name}} ng-container [ERROR ->]*ngFor="let rating of ratings | groupFilter:{{name}} " This is the html: <tr *ngFor="let name of measureNames"> <td>{{name}}</td> <td><input class="form-control"></td> <ng-container *ngFor="let rating of ratings | groupFilter:{{name}} "> <ng

How to create a table rows with an array in angular?

白昼怎懂夜的黑 提交于 2019-12-19 04:37:06
问题 I have an array from 1 until 35: numbersArray = [1,2,3,4,....,35] I want to create a html table like the following: --------------------------- 1 |2 |3 |4 |5 |6 |7 --------------------------- 8 |9 |10 |11 |12 |13 |14 --------------------------- 15 |16 |17 |18 |19 |20 |21 --------------------------- 22 |23 |24 |25 |26 |27 |28 --------------------------- 29 |30 |31 |32 |33 |34 |35 --------------------------- I used the following: <tr *ngFor="let number of numbersArray;"> <td>{{number}}</td> <

Angular io (4) *ngFor first and last

别等时光非礼了梦想. 提交于 2019-12-18 12:09:48
问题 I am trying to tell whether an item in an *ngFor is the first or last element to style a container. Is there a way to do something like this? <md-expansion-panel *ngFor="let item of items" *ngClass="{ 'first' : item.isFirst }"> <content></content> </md-expansion-panel> Thanks for any help offered! 回答1: Inside the ngFor you have access to several variables: index: number: The index of the current item in the iterable. first: boolean: True when the item is the first item in the iterable. last:

Angular2 loading dynamic content/html in for loop

时间秒杀一切 提交于 2019-12-18 10:56:21
问题 I have a json array which can contain either the component or the html selector for the component i want to load. I am trying to load this data inside a for loop. When I try to interpolate the value {{d.html}} it appears as plan text. When I use the innerHTML approach below and inspect the dom I see the html there but it does not behave as a custom component (the dom will just contain instead of initializing it and replacing it with the components template. I have look at the dynamic content

how to filter *ngFor result based on a selected dropdown value

我是研究僧i 提交于 2019-12-18 05:22:08
问题 Choosing a category: <ion-select name="categories"> <ion-option *ngFor="let category of categories;"> {{category}} </ion-option> </ion-select> Listing the items: <ion-item-sliding *ngFor="let item of items; let idx = index;"> <ion-item> <h2>{{item.title}}</h2> </ion-item> ... </ion-item-sliding> How can I use the value from (select) to choose which category gets listed? I tried adding a ngModule in and passing it as a condition into the sliding ngFor, but it wouldn't work. 回答1: You can use a

how to filter *ngFor result based on a selected dropdown value

ε祈祈猫儿з 提交于 2019-12-18 05:22:07
问题 Choosing a category: <ion-select name="categories"> <ion-option *ngFor="let category of categories;"> {{category}} </ion-option> </ion-select> Listing the items: <ion-item-sliding *ngFor="let item of items; let idx = index;"> <ion-item> <h2>{{item.title}}</h2> </ion-item> ... </ion-item-sliding> How can I use the value from (select) to choose which category gets listed? I tried adding a ngModule in and passing it as a condition into the sliding ngFor, but it wouldn't work. 回答1: You can use a

give active class onclick in ngFor angular 2

旧街凉风 提交于 2019-12-17 23:45:10
问题 Hi I have unordered list and all of them have active class. I want to toggle active class when clicked to any list item. My code is like this <ul class="sub_modules"> <li *ngFor="let subModule of subModules" class="active"> <a>{{ subModule.name }}</a> </li> </ul> can anyone help me to do this? 回答1: You can do something like: <ul class="sub_modules"> <li (click)="activateClass(subModule)" *ngFor="let subModule of subModules" [ngClass]="{'active': subModule.active}"> <a>{{ subModule.name }}</a>

ngFor length in Angular 5

笑着哭i 提交于 2019-12-17 22:28:41
问题 I have three buttons : All (Reals+ Fakes), Reals(total count), Fakes(total count) I am trying to get the total count of my total feeds which will be shown in All. And the total count of feed.feed_type != '' which will be shown Reals. And the total count of feed.feed_type == '' which will be shown Fakes. Feeds Model export class Feeds { feed_id: string; feed_category: string; feed_title: any; feed_description: string; feed_terms: string; feed_type: string; checked: false; } Feeds Component:

How to use trackBy with ngFor

五迷三道 提交于 2019-12-17 09:38:11
问题 I can't really understand what I should return from trackBy . Based on examples I've seen on the web, I should return the value of some property on the object. Is it correct? Why do I get index as a parameter? For example, in the following case: constructor() { window.setInterval(() => this.users = [ {name: 'user1', score: Math.random()}, {name: 'user2', score: Math.random()}], 1000); } userByName(index, user) { return user.name; } ... <div *ngFor="let user of users; trackBy:userByName">{

Angular2 Dynamic input field lose focus when input changes

左心房为你撑大大i 提交于 2019-12-17 05:01:42
问题 I'm making a dynamic form. A Field has a list of values. Each value is represented by a string. export class Field{ name: string; values: string[] = []; fieldType: string; constructor(fieldType: string) {this.fieldType = fieldType;} } I have a function in my component which adds a new value to the field. addValue(field){ field.values.push(""); } The values and the button are displayed like this in my HTML. <div id="dropdown-values" *ngFor="let value of field.values; let j=index"> <input type=