ngfor

How to iterate object keys using *ngFor?

帅比萌擦擦* 提交于 2019-12-17 04:32:34
问题 I've been digging around, and found out that I can use the following to use *ngFor over an object: <div *ngFor="#obj of objs | ObjNgFor">...</div> where ObjNgFor pipe is: @Pipe({ name: 'ObjNgFor', pure: false }) export class ObjNgFor implements PipeTransform { transform(value: any, args: any[] = null): any { return Object.keys(value).map(key => value[key]); } } However, when I have an object like this: { "propertyA":{ "description":"this is the propertyA", "default":"sth" }, "propertyB":{

Angular 2 *ngFor does not print to table , I am getting my information from a GET HTTP call and it works

风流意气都作罢 提交于 2019-12-13 09:29:36
问题 hello , plz i need a help my ngFor in angular2 does not print to table I am getting my information from a GET HTTP call and it works , if I do the *ngFor it does not display this is my html <table class="table table-bordered"> <thead> <tr> <td><b>Title</b></td> <td><b>url</b></td> <td><b>description</b></td> <td width="275" align="center"><b>Action</b></td> </tr> </thead> <tbody> <tr *ngFor="let formation of formation" > <td>{{formation.title}}</td> <td>{{formation.url}}</td> <td>{{formation

got error when i used custom pipe in ngFor

邮差的信 提交于 2019-12-13 07:26:44
问题 I just want to send <input type='text'[(ngModel)]='listFilter' /> value to my custom pipe as parameter. this is my component code that contains list of products an can show them in html without any problem : import { Component } from '@angular/core'; import { IProduct } from './product'; @Component({ selector: 'pm-products', templateUrl: 'app/products/product-list.html', }) export class ProductListComponent { pageTitle: string = 'Product List'; IText: string; products: IProduct[] = [ {

Angular - How ngFor works?

大城市里の小女人 提交于 2019-12-13 06:31:18
问题 I want to refacto my code. I have this ngFor in my section-portrait.component.html <app-portrait *ngFor="let model of models" [firstName]="model.firstName" [lastName]="model.lastName" ></app-portrait> Here is my portrait.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-portrait', templateUrl: './portrait.component.html', styleUrls: ['./portrait.component.scss'] }) export class PortraitComponent implements OnInit { firstName: string; lastName: string;

Angular 2+ Expression has changed after it was checked

試著忘記壹切 提交于 2019-12-13 05:12:08
问题 I know there are several threads on this issue, but the proposed fixes are not working for me. The data appears correctly then soon dissappears. From what I understand, a round of change detection needs to be activated. I have used: ngAfterViewInit() { this.cdr.detectChanges(); } but the error persists. If I add this.cdr.detectchanges() call to the increment() method, it produces an loop and the maximum call stack is exceeded. component.html: <div *ngFor="let item of messageSplit[increment()]

How to get exact word using angular filter pipe and not words matching the value?

陌路散爱 提交于 2019-12-13 03:30:55
问题 Example if i search [App] i don't want to see [Apple, Appliance, Appliances], instead i want to only see [App] in the search @Pipe({ name: 'filter' }) export class FilterPipe implements PipeTransform { transform(items: any, filter: any, isAnd: bool): any { if (filter && Array.isArray(items)) { let filterKeys = Object.keys(filter); if (isAnd) { return items.filter(item => filterKeys.reduce((memo, keyName) => (memo && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] ===

AngularFire2 nested *ngFor Array within Array… but Firebase doesn't have arrays…?

强颜欢笑 提交于 2019-12-12 15:36:33
问题 I'm using AngularFire2, trying to get lists out of lists. A nested *ngFor within an *ngFor doesn't show on the view... app.componnent ... constructor(private _af: AngularFire) { this.lists = this._af.database.list(this._API_URL); } ... app.component.html <div *ngFor="let list of lists | async"> {{sublist.name}}<br/> <!-- I can see you --> <!--******* I can't see you **********--> <div *ngFor="let rootword of list.rootwords"> {{rootword.word}} {{rootword.total}} </div> </div> Example of

Angular 2: Select dropdown not selecting option despite “selected” attribute

巧了我就是萌 提交于 2019-12-12 12:32:46
问题 I have the following code for a select dropdown: <select id="UnitOfMeasurementId" name="UnitOfMeasurementId" [(ngModel)]="UnitOfMeasurementId"> <option *ngFor="let unit of UnitOfMeasurements" [ngValue]="unit.Value" [selected]="unit.Selected">{{unit.Text}}</option> </select> Each item in the UnitOfMeasurements array looks something like this: Selected: false Text: "lb" Value: "1" Or this: Selected: true Text: "kg" Value: "3" [(ngModel)]="UnitOfMeasurementId" contains the value of the item that

How to set formControlNames using *ngFor in Angular?

*爱你&永不变心* 提交于 2019-12-12 09:18:13
问题 I'm trying to set form control using *ngFor over objects in an Array. Depending on the users sometimes I will have 1 object in the Array but other times multiple. My issue is that I want to create a formControlName using the loop which I can but not sure how to set form group validators in the component? Just setting them like below means if there is only 1 object the form remains invalid while looking for the other formControlName that does not exist. So if the first object with name:"Days"

Angular 2 - Load the dynamic components one by one

半腔热情 提交于 2019-12-12 05:29:22
问题 <div *ngFor="let header of headers"> <widget [header]="header" (loaded)="onLoaded($event)"></widget> </div> How to bind headers one by one based on the 'onLoaded' emit. Basically, I want the widget to load one by one after each successful data load(output method onLoaded emits boolean). 回答1: Its very weird requirement so you can start like this 1) create empty new array forLoop: any[] = []; 2) Before displaying headers values( may be in ngonint()) add first element from the headers array to