Angular 2 - ngFor #2935

Hi,

I have the following template inside a *ngFor. I have a detailList with details.

Inside the template there are 3 select boxes. To fill the select boxes I need 3 different List. - documentList

• aktivitaetenList
• dokumentPositionDetailList

To get those lists I called multiple services. But if I selected a value in the "dokument" <select> I need to filter the aktivitaetenList and the documentPositionDetailFilteredList

I saved the filtered lists in different variables:

• filteredAktivitaetenList = filtered aktivitaetenList
• documentPositionDetailFilteredList = filtered dokumentPositionDetailList

Now for the first element inside my "detailList" all works fine. I select a document => the aktivitaetList was filtered and shows only the aktivtaeten for the document it works also for the dokumentPositionDetailList.

BUT when I add know a new element inside my "detailList" and I want to select an aktivitaet without select a document (it should be filled with aktivities) there is only the filtered list from the previous detail.

How can I achieve to get the complete list of activities inside each detail of detailList ?(detail 1, detail 2 ,....).

Thanks for help me !

<div class="panel panel-default" *ngFor="let detail of detailList; let index = index;let first = first;let last = last;">
        <form #accordionForm="ngForm" novalidate>
            <div class="panel-heading" role="tab" id="heading{{index}}">
                <div class="panel-title">
                    <a role="button" name="collapseHead{{index}}" data-toggle="collapse" data-parent="#accordion" href="#colapse{{index}}" aria-expanded="false">
                    </a>                    
                </div>
            </div>
            <div id="colapse{{index}}" class="panel-collapse collapse" [ngClass]="{'in': last}" role="tabpanel">
                <div class="panel-body">
                    <div *ngIf="detail.aktivitaet === undefined || (detail.aktivitaet !== undefined && detail.aktivitaet !== null && detail.aktivitaet.dokumentErlaubtJN)" class="form-group form-md-line-input form-md-floating-label no-hint">
                        <label>{{l("Dokument")}}</label>
                        <select name="dokument{{index}}" class="form-control" (change)="getFilteredAktivitaeten(index, detail.dokumenteId )" [ngClass]="{'edited': detail.dokumenteId }" [(ngModel)]="detail.dokumenteId">
                            <option [ngValue]="undefined" selected>{{l('NoDokumentSelected')}}</option>
                            <option *ngFor="let dokument of documentList;" [ngValue]="document.id">{{dokument.bezeichnungDE}}</option>
                        </select>
                    </div>
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <label>{{l("Aktivitaet")}}</label>
                        <select name="aktivitaetId{{index}}" class="form-control" [ngClass]="{'edited': detail.aktivitaetId }" (change)="setAktivitaet(index);" [(ngModel)]="detail.aktivitaetId" required>
                            <option [ngValue]="undefined" selected>{{l('SelectAktivitaet')}}</option>
                            <option *ngFor="let aktivitaet of filteredAktivitaetenList;" [ngValue]="aktivitaet.id">{{aktivitaet.bezeichnungDE}}</option>
                        </select>
                    </div>
                    <div *ngIf="detail.dokumenteId" class="form-group form-md-line-input form-md-floating-label no-hint">
                        <label>{{l("DokumentPositionDetail")}}</label>
                        <select name="dokumentPositionDetail{{index}}" class="form-control" [ngClass]="{'edited': detail.dokumentPositionDetailId }" [(ngModel)]="detail.dokumentPositionDetailId" [required]="detail.dokumentPositionDetailId">
                            <option [ngValue]="undefined" selected>{{l('NoDokumentDetailSelected')}}</option>
                            <option *ngFor="let dokumentDetail of documentPositionDetailFilteredList;" [ngValue]="dokumentDetail.id">{{dokumentDetail.id}}</option>
                        </select>
                    </div>                    
                </div>
            </div>
        </form>
    </div>

@Component({
    selector: 'createUpdateArbeitstagDetail',
    templateUrl: './create-update-arbeitstagDetail.component.html'
})
export class CreateUpdateArbeitstagDetailComponent extends AppComponentBase implements AfterViewInit {

    @Input() detailList: Array<detailListeDto>;

    @Output() detailListChanged: EventEmitter<Array<detailListeListDto>> = new EventEmitter<Array<detailListeDto>>();

    aktivitaetenList: AktivitaetListDto[];
    dokumentList: DokumentListDto[];
    dokumentPositionDetailList: DokumentPositionDetailListDto[];
    dokumentPositionDetailFilteredList: DokumentPositionDetailListDto[];
    filteredAktivitaetenList: AktivitaetListDto[];


    constructor(injector: Injector,
        private _aktivitaetService: AktivitaetServiceProxy,
        private _dokumentService: DokumentServiceProxy
    ) {
        super(injector);
		
        this.aktivitaetenList = new Array<AktivitaetListDto>();
        this.dokumentList = new Array<DokumentListDto>();
        this.dokumentPositionDetailList = new Array<DokumentPositionDetailListDto>();
        this.filteredAktivitaetenList = new Array<AktivitaetListDto>();
    }

    ngAfterViewInit(): void {
        var self = this;

        this._dokumentService.getAllDokumentAsync().subscribe(response => {
            this.dokumentList = response.items;
        });

        this._dokumentService.getDokumentPositionenDetail().subscribe(response => {
            this.dokumentPositionDetailList = response.items;
        });

        this._aktivitaetService.getAllAktivitaetenAsync().subscribe(response => {
            this.aktivitaetenList = response.items;
        });
    }

    getFilteredAktivitaeten(index: number, dokumentId?: number): void {
		
		// If a document was selected I call the service to get all aktivities for the current selected document
        if (dokumentId) {
            this._aktivitaetService.getAllAktivitaetenForDokument(dokumentId).subscribe(response => {
                this.filteredAktivitaetenList = response.items;
            });

			// Load the details for the document
            this.getDokumentDetails(dokumentId);
        }
        else {
			// Load all activities without a document
            this.filteredAktivitaetenList = this.aktivitaetenList.filter(x => x.dokumentPflichtJN === false);
        }
    }

    getDokumentDetails(dokumentId?: number): void {
        this.dokumentPositionDetailFilteredList = this.dokumentPositionDetailList.filter(x => x.dokumentId == dokumentId);
    }     

    delete(index: number): void {
        this.message.confirm(
            this.l('AreYouSureToDeleteTheDetail', this.detailList[index].aktivitaet),
            isConfirmed => {
                if (isConfirmed) {
                    this.detailList.splice(index, 1);

                    this.detailListChanged.emit(this.detailList);
                }
            }
        )
    };
}