ngfor

问题 I'm using Angular 9. I want to load a series of objects, each of which has image data. I would like to load all the objects, first, and then load the image data after. I have this in my component.ts file ngOnInit ... ngOnInit(): void { this.authService.getAllinLibrary().subscribe((res: any[]) => { this.results = res; ... for (let i = 0; i < results.length; i++) { this.getTheImage(res[i].Id, i); } }); getTheImage(imageId: number, index: number) { this.authService.getPersonImage(imageId)

问题 ngFor filtering based on a search using pipe - This is working fine , Now I have to add ngIf condition based on the search query If nothing result then I have to show another new div with 'no data' text <input type="text" [(ngModel)]="queryString" placeholder="Search to type"> <li *ngFor="let project of projects | FilterPipe: queryString ;> {{project.project_name}} </li> //pipe transform(value: any, input:any ): any { if(input){ input = input.toLowerCase(); return value.filter(function (el:

问题 ngFor filtering based on a search using pipe - This is working fine , Now I have to add ngIf condition based on the search query If nothing result then I have to show another new div with 'no data' text <input type="text" [(ngModel)]="queryString" placeholder="Search to type"> <li *ngFor="let project of projects | FilterPipe: queryString ;> {{project.project_name}} </li> //pipe transform(value: any, input:any ): any { if(input){ input = input.toLowerCase(); return value.filter(function (el:

问题 I am trying to create a carousel component for my Angular 2 application. I want the carousel to be generic, so that it will support both these cases: <myCarousel> <div>first card</div> <div>second card</div> .... </myCarousel> and the more generic <myCarousel> <myCard *ngFor="let card of cards" [card]="card"></myCard> </myCarousel> The problem is that the carousel component requires an initialisation to run after the *ngFor has completed, otherwise it won't be displayed correctly. Since the

问题 I am trying to create a carousel component for my Angular 2 application. I want the carousel to be generic, so that it will support both these cases: <myCarousel> <div>first card</div> <div>second card</div> .... </myCarousel> and the more generic <myCarousel> <myCard *ngFor="let card of cards" [card]="card"></myCard> </myCarousel> The problem is that the carousel component requires an initialisation to run after the *ngFor has completed, otherwise it won't be displayed correctly. Since the

问题 I'm creating a dynamic reactive form that is built based on a data set: e.g. I have a list of objects: [{question: 1, totalMarks: 3}, {question: 2, totalMarks: 2}, ...] For each of these objects, I want to create a FormGroup (which I have) with a radio input based on the totalMarks field. The problem I face is the radio buttons input itself is dynamic, whereby I iterate over totalMarks starting from i = 0; i < totalMarks; i++ , e.g.: <div class="group"> <label> <input type="radio"

问题 <mat-accordion class="gl-w-100" *ngFor="let item of myObj;let i=index"> <mat-expansion-panel class="gl-w-100 gl-mb-20p" [expanded]="step===i" (opened)="step=i" hideToggle> **<mat-expansion-panel-header [collapsedHeight]="'60px'" class="disable_ripple gl-w-100" tabindex="i" [class.focus]="step==i">** <div class="gl-w-100 gl-d-flex gl-fd-row gl-justify-sb gl-px-10"> <!-- <span class="icon-faq gl-fs-25 gl-mr-15"></span> --> <mat-panel-title class="gl-ff-Poppins gl-fs-14 gl-lh-59">{{item.Heading}

问题 <mat-accordion class="gl-w-100" *ngFor="let item of myObj;let i=index"> <mat-expansion-panel class="gl-w-100 gl-mb-20p" [expanded]="step===i" (opened)="step=i" hideToggle> **<mat-expansion-panel-header [collapsedHeight]="'60px'" class="disable_ripple gl-w-100" tabindex="i" [class.focus]="step==i">** <div class="gl-w-100 gl-d-flex gl-fd-row gl-justify-sb gl-px-10"> <!-- <span class="icon-faq gl-fs-25 gl-mr-15"></span> --> <mat-panel-title class="gl-ff-Poppins gl-fs-14 gl-lh-59">{{item.Heading}

问题 I'using ng-container to iterate on a list and create components <ng-container *ngFor="let f of optionsList; let i = index;"> <!-- component--> <app-component #fieldcmp *ngIf="isAppComponent(f)" ></app-field> <!--another components--> <app-anoter-component1 *ngIf="isAnotherComponent1(f)"> </app-anoter-component1> ... <app-anoter-componentn *ngIf="isAnotherComponentn(f)"> </app-anoter-componentn> </ng-container> I would to list of References components inside ng-container. I tried to use

问题 Im using angular in ionic application but in a modal the ngForm doesnt works. I think its cleary whit a simple code. <li *ngFor="let item of [1,2,3,4,5]; let i = index"> {{i}} {{item}} </li> this code show this in all rest of page -> list but in a modal create like this async presentModal(test){ const modal = await this.modalController.create({ component: TestPage, componentProps: { test } }); modal.onWillDismiss().then(dataReturned => { }); return await modal.present(); } dont show anything.