Winkel 4 @Input Paramter verändert ein innen abonnieren aktualisiert nicht die Ansicht

Question

Ich habe eine Komponente auswählen, und ich Parameter es wie folgt aus:

<app-select-v2 
    [formGroup]="model" 
    [controlName]="'owner'" 
    [options]="ownerOptions" 
    [label]="'Select task\'s owner'" 
    [width]="'100%'" 
    [height]="'30rem'" 
    [scrollFrom]="5" 
></app-select-v2> 

Dies ist eine individuelle Auswahl-Optionsliste, was die ownerOptions Array bekommt . Das Array sieht so aus:

ownerOptions:Option[] = [ 
    {name: 'name1', value: 'value1'}, 
    {name: 'name2', value: 'value2'} 
    ... 
]; 

Am Anfang ist dies ein leeres Array und ich möchte es mit Daten füllen. Die setOwnerOptions() -Funktion, die die Füllung ausführen soll. Ich nenne es in ngOnInit()

setOwnerOptions(){ 
    this._calendar.getActiveUsers().subscribe((names:string[]) => { 
     for(var i:number = 0; i<names.length; i++){ 
     var _option = new Option(); 
     this._calendar.getUserFullName(names[i]).subscribe((fullname:string) =>{ 
      _option.name = fullname; 
      _option.value = names[i]; 
      this.ownerOptions.push(_option); 
     }); 
     } 
    }); 
    } 

(ich weiß, dass dies nicht der beste Weg ist, um die ID (Name) und full_names von der api zu bekommen. Ich werde diesen Teil neu schreiben bald.) Die getActiveUsers() und die getUserFullName (name: string) -Funktionen funktionieren einwandfrei. Ich erhalte die angeforderten Daten von der API und die Schleife drückt sie in das Array "ownerOptions". Aber der Punkt ist, dass die Ansicht nicht aktualisiert wird und außerhalb des Abonnements ist die ownerOptions immer noch ein leeres Array, weil eckle die Änderung nicht bemerkt. Könnte mir bitte jemand dabei helfen? Ich habe eine Art Erfahrung mit diesem:/ (Ich habe versucht, eine Zone zu erstellen und das Skript mit changeRef laufen, aber es funktionierte für mich dasselbe.)

Dank Ihre Antworten und Zeit :)

Answer 1

Das Problem ist hier:

_option.value = names[i]; 

An diesem Punkt i gleich names.length - 1 für alle Abonnements. Es ist zwar nicht das beste Stück Code, aber es ist schwer zu erkennen, was Sie eigentlich erreichen möchten. Um Ihr Problem zu beheben, können Sie es ändern. Durch die Verwendung eines forEach Schleife verhindern Sie dieses Problem:

setOwnerOptions(){ 
    this._calendar.getActiveUsers().subscribe(names => { 
    names.forEach(name => 
     this._calendar.getUserFullName(name).subscribe(fullname => { 
     let option = new Option(); 
     option.name = fullname; 
     option.value = name; 
     this.ownerOptions.push(_option); 
    }) 
    }) 
} 

Nicht ganz sicher, aber ich glaube, können Sie es auch nur beheben, indem Sie mit dem let Schlüsselwort in der for loop, statt var. Eigentlich sollte man -never- das var Schlüsselwort verwenden, wenn Sie wirklich wissen, was Sie tun, und selbst dann wissen Sie, es nicht zu benutzen

Answer 2

Implement OnChanges in Ihr Kind Komponente:

export class SelectV2 implements OnInit, OnChanges { 
    // ... 
    ngOnChanges(change: SimpleChange) { 
    console.log(change); 
    } 
} 

diese Methode jedes Mal seinen Wert geändert wird ausgelöst, eine Input hat.

Answer 3

versuchen, die Einzelteile zu einem lokalen Array schieben dann Einstellung this.ownerOptions = myArray