ngfor

问题 I'm using Angular 5.2.9. I was wondering when should I use Renderer2 over ngStyle ? Which is the best solution ? 1: <div #div>FOO BAR</div> @ViewChild('div') div: ElementRef; constructor(private renderer: Renderer2) {} ngAfterViewInit() { this.renderer.setStyle(this.div.nativeElement, 'background', 'blue'); } 2: <div [ngStyle]="styleValue">FOO BAR</div> styleValue: any = {}; ngAfterViewInit() { this.styleValue = {background: 'blue'}; } I know that it is easier to use "ngStyle" in a ngFor, eg:

问题 I have a 2-dimensional variable vals : number [] [] I try to use it in a table. How can I address a dimension to have the index of it? <tr *ngFor="let idx2 = ???"> <td *ngFor="let idx1 = ???">{{ values [idx1] [idx2] }}</td> </tr> EDIT : changed the sample to have the index switched 回答1: No need for using indexes: <tr *ngFor="let row of vals"> <td *ngFor="let value of row">{{value}}</td> </tr> If you need indexes: <tr *ngFor="let row of vals; index as i"> <td *ngFor="let value of row; index as

问题 This is my code: <div *ngFor="let product of products | mypipe : cb.checked : cb.value"> <label>{{product.productName}} - {{product.productColor}}</label> </div> <!--<div *ngFor="let color of colors">--> <input #cb type="checkbox" [(ngModel)]="cb.checked" [value]="'Blue'" /> <label>{{color}}</label> <!--</div>--> It works fine with the code commented but if i uncommet it, it doesnt work. My goal is to have multiple checkboxes created dynamic and filter some data. I can do it with just one

问题 Hi I am having trouble getting json value which is really deeply nested using pipe. What am I doing wrong? Pipe I'm using import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'keyValues' }) export class KeysPipe implements PipeTransform { transform(value, args: string[]): any { let keys = []; for (let key in value) { keys.push({ key: key, value: value[key] }); } return keys; } } Json I'm getting from server. data: 0: { Profile: { ... } BasicInfo: { ... } introduceInfo: {

问题 I have a list with 2 columns, I want the left to show even indices and right to odd. Currently I'm iterating the whole list for every column and filtering with ngIf="odd" or even. Can I make ngFor only do and watch even or odd indices? Would that improve the performance drastically? I don't know how much of a burden is it when half of the DOM elements are ng-if'ed out. The list doesn't change frequently but when it changes it changes completely. 回答1: You can create a pipe that only returns

问题 I have a list with 2 columns, I want the left to show even indices and right to odd. Currently I'm iterating the whole list for every column and filtering with ngIf="odd" or even. Can I make ngFor only do and watch even or odd indices? Would that improve the performance drastically? I don't know how much of a burden is it when half of the DOM elements are ng-if'ed out. The list doesn't change frequently but when it changes it changes completely. 回答1: You can create a pipe that only returns

问题 Today i was trying angular directive ngFor. The problem i am facing is that when i select any checkbox (for e.g. 0) and click "next" , if next question also have the same option (0) as i have selected in previous question then it will be checked automatically, i dont know how?? [This behaviour is not seen if any two or more consecutive questions doesnt have alteast one same option. ]. I hope it make sense. here is my plunker template: {{question}} <div *ngFor="let option of options"> <input

问题 Is it possible to create input fields with a ngFor in a template driven form and use something like #name="ngModel" to be able to use name.valid in another tag? Right now we have a dynamic list of products with a quantity field and a add to cart button in a table. I want to make the whole thing a form with a add all button at the end like this: <form #form="ngForm"> <div *ngFor="item in items"> <input name="product-{{item.id}}" [(ngModel)]="item.qty" #????="ngModel" validateQuantity> <button

问题 How can we initialize and manipulate a check box value? I've looked at quite a number of examples, but haven't been able to get any to work. I'm trying to present a N x M table where the rows represent tasks, and the columns students. The idea is that checking one of the check-boxes in the table assigns a task to a student. There is a typescript hash map which contains the value of all the checkboxes ; assigned : { [key:string]:boolean; } = {}; the hash key is: var key = a.TaskId + '_' + a

问题 How can we initialize and manipulate a check box value? I've looked at quite a number of examples, but haven't been able to get any to work. I'm trying to present a N x M table where the rows represent tasks, and the columns students. The idea is that checking one of the check-boxes in the table assigns a task to a student. There is a typescript hash map which contains the value of all the checkboxes ; assigned : { [key:string]:boolean; } = {}; the hash key is: var key = a.TaskId + '_' + a