angular / angular/components

mat-selection-list list-options is not updated when formControl for mat-selection-list is updated with setValue

Offen
#15,477 3 Kommentare 10 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/list P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### What is the expected behavior?
Checkboxes should update

#### What is the current behavior?
Checkboxes do not update.

#### What are the steps to reproduce?
**editor.componenet.html**
```html

{{ role.attributes.name }}

```

**editor.component.ts (onInit)**
```javascript
this.form = this.fb.group({
role: [[...this.user.attributes.role], Validators.required],
});
```

`this.user.attributes.role` is an array of string.

**I tried**
**editor.component.ts**
```javascript
ngAfterContentInit() {
this.form.patchValue({
'role': [...this.user.attributes.role]
});
}
```

**I also tried**
**editor.component.ts**
```javascript
ngAfterContentInit() {
setTimeout(() => {
this.form.patchValue({
'role': [...this.user.attributes.role]
});
console.log(this.form.value.role);
}, 1000);
}
```

Note that I'm getting `roles` with an observable :
**editor.component.ts**
```javascript
combineLatest(
// Others observables ...
this.jsonApi.all('roles').pipe(map(document => document.data)),
).subscribe(([firms, langs, roles]) => {
// Others observables ...
this.roles = roles;
});
```

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 7.x.x
Material 7.x.x

#### Is there anything else we should know?
I know there's a [ticket](https://github.com/angular/material2/issues/9085) about this, but it's closed and no one replies

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Reproduziere das Problem mit editor.component.html und editor.component.ts unter Verwendung einer Angular 7 mat-selection-list, asynchroner Rollen und formControl setValue oder patchValue. Beginne damit, die Weitergabe von mat-selection-list- und mat-list-option-Werten nachzuverfolgen; abgeschlossen ist die Aufgabe, wenn die Kontrollkästchen nach der Aktualisierung des Formulars das aktualisierte String-Array widerspiegeln.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.