ngfor

问题 I have arrived at a lengthy syntax iterating over data[areaId].main.points . Since the data is bound via [(ngModel)] , it looks atrociously in my opinion. Something like this. <div *ngFor="let item of data[areaId].main.points; let index = index; let ..." ...> <input [(ngModel)]="data[areaId].main.points[index].e" ... > <input [(ngModel)]="data[areaId].main.points[index].n" ... > ... </div> Usually, when the syntax gets ugly, it's a strong indication that the design sucks and should be

问题 I have an ul element with some li's Im getting those li's with *ngFor. Their background color is white but I want to change the background color to red if I click on them. But I only want to change the background color of the li I clicked on and not every li. <div class="Container"> <h1>My Children</h1> <ul class="list-group"> <li style="cursor: pointer" class="list-group-item" *ngFor="let Child of children" (click)="onChildSelect(Child)" >{{Child.Name}} </li> </ul> </div> 回答1: I would add

问题 I'm currently building an Angular website. I create several components using a *ngFor loop. The created components each have a mouse event with which a MatDialog should be opened (MatDialog). The problem is that the dialog does not open properly and the buttons inside do not work. However, as soon as I remove the *ngFor loop and only represent the first element, the dialog works perfectly. Does anyone know this problem and how to fix it or an alternative to the *ngFor loop? Does not function:

问题 I'm currently building an Angular website. I create several components using a *ngFor loop. The created components each have a mouse event with which a MatDialog should be opened (MatDialog). The problem is that the dialog does not open properly and the buttons inside do not work. However, as soon as I remove the *ngFor loop and only represent the first element, the dialog works perfectly. Does anyone know this problem and how to fix it or an alternative to the *ngFor loop? Does not function:

问题 I have a simple generic component in Angular which receives a list of strings and creates a radio group for these strings: @Component({ selector: 'radio-group', templateUrl: `<div *ngFor="let item of items"> <label for="input_{{item}}">{{item}}</label> <input type="radio" id="input_{{item}}" value="{{item}}" [formControl]="radioControl"> </div>`, styleUrls: ['./radio-group.component.scss'] }) export class RadioGroupComponent { @Input() items: string[]; @Input() radioControl: FormControl; } I

问题 I am experiencing a problem with async pipe in Angular2, when I use it inside a *ngFor . Here some code: This is the template <li *ngFor="#obj of _filtersPageState | async"> hello world </li> The _filtersPageState variable is declared as: private _filtersPageState: Observable<any> = new Observable<any>(); and it is initialized by using the select function of @ngrx/store : this._filtersPageState = store.select('FiltersPageState'); this._filtersPageState.subscribe(v => console.log(v)); The

问题 This question already has answers here : How to do ngFor loop on nested json object? (4 answers) Closed 2 years ago . I am new angular 2. I am able to get Json file. I am able to get some part json file but not the array inside json file. For example I want to visualise GPS device in First UL and IMU device in second UL. SInce they are array I am getting same data of IMU device in bOTH the lists. json file "config" : [ { "id" : "gps_device", "name" : "GPS Device", "type" : "String", "widget"

问题 This question already has answers here : How to do ngFor loop on nested json object? (4 answers) Closed 2 years ago . I am new angular 2. I am able to get Json file. I am able to get some part json file but not the array inside json file. For example I want to visualise GPS device in First UL and IMU device in second UL. SInce they are array I am getting same data of IMU device in bOTH the lists. json file "config" : [ { "id" : "gps_device", "name" : "GPS Device", "type" : "String", "widget"

问题 Below link is a sample code. https://plnkr.co/edit/xmWMm0yjFemdXQzZpJad?p=preview I have an object(test), which contain a number array(test.arr). <div *ngFor="let v of test.arr; let i = index"> <input [(ngModel)]="test.arr[i]" type="text"> </div> Once I type something on input, it will missing focus. BTW, the reason why using test.arr[i] rather than v, see "Cannot assign to a reference or variable!" 回答1: Plunker example If you use *ngFor with primitive values number , string , ... you need to

问题 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: