typescript - Angular: inställningar för en mat-select visas inte men tillämpas när värdet är null

Jag har en flervalsväljare i Angular och vill sätta några initiala värden. Se följande exempel: Stackblitz

Mall

<form [formGroup]="filterFormGroup">
  <mat-form-field color="accent">
    <mat-label>{{ 'Users' }}</mat-label>
    <mat-select formControlName="users" multiple>
      <mat-option [value]="null">No User</mat-option>
      <mat-option value="user1">User 1</mat-option>
      <mat-option value="user2">User 2</mat-option>
      <mat-option value="user3">User 3</mat-option>
    </mat-select>
  </mat-form-field>
</form>

Kod

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';

@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
  filterFormGroup = this.formBuilder.group({
    users: [[]],
  });

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.filterFormGroup.valueChanges.subscribe(x => console.log('changes: ' + JSON.stringify(x)));

    const preselectedFilters = {
      users: [null, 'user1']
    };
    this.filterFormGroup.setValue(preselectedFilters);
  }
}

Observera att null är ett giltigt alternativ i mitt exempel och inte någon platshållare. Värdena är korrekt inställda men "null-alternativet" visas inte som valt... bara "user1"-alternativet visas.

Kan någon förklara för mig varför det inte visas som valt och kanske till och med ge en lösning på problemet?

Svar #1

Du kan göra det genom att ändra null till ''

<mat-option value="">No User</mat-option>
 users: ['','user1']