Angular Reactive Forms - чтение / установка значения из массива

Question

У меня есть 3 файла:

• Служба, которая собирает мои данные из firestore и создает форму
• Файл component.ts
• component.htmlfile

Для большинства моих входов у меня есть форма, правильно считывающая данные из построителя сервисов / форм.У меня возникли трудности с использованием фрагмента «Выбор углового материала» (выпадающий список).

В моем файле component.ts у меня есть массив из двух опций, из которых пользователь может выбирать.После выбора этот параметр будет сохранен в виде строки в firestore.

Как вы можете видеть ниже, в настоящее время мой HTML-код в настоящее время считывает массив из связанного с ним файла component.ts.В идеале мне бы хотелось, чтобы при нажатии на него отображалось текущее значение из firestore с двумя доступными опциями.

Как предоставить эти две опции в HTML, а также отображать текущее установленное значение из firestore?

Сервис

export interface IUserSettings {
  usersetting_dateformat: string;
}

@Injectable()

export class SettingsService {

  // Database
  private settingsDocRef: AngularFirestoreDocument<any>;
  settingsDocument: Observable<any>;

  // User
  userID: string;

  // Form
  editForm = new FormGroup({});

  // User Settings Behaviour Subject 
  userSettings$: BehaviorSubject<IUserSettings>;

  constructor(
    private readonly afs: AngularFirestore, fb: FormBuilder) {

    this.editForm = fb.group({
      usersetting_dateformat: [''],
    });

    this.userSettings$ = new BehaviorSubject({
      dateformat: 'DD/MM/YYYY',
    });

  }

  getSettingsData() {
    this.settingsDocRef = this.afs.doc(`settings/${this.userID}`);
    this.settingsDocument = this.settingsDocRef.snapshotChanges();
    this.settingsDocument.subscribe(value => {
      const userSettings = value.payload.data() as IUserSettings;
      this.userSettings$.next(userSettings);
      this.editForm.patchValue(this.userSettings$.getValue());
    });
  }

}

Component.ts

... 

  dateFormats = ["DD/MM/YYYY", "MM/DD/YYYY"];

...

Component.html

 <form [formGroup]="settingsService.editForm">
    <mat-select placeholder="Date Format">
        <mat-option *ngFor="let dateFormat of dateFormats" [value]="dateFormat"> {{dateFormat}} </mat-option>
    </mat-select>
</form>

Answer 1

Не знаю, почему вы излишне усложняете это с BehaviourSubject, когда вы уже получаете значение, а затем вызываете метод patchValue в форме.

Вы можете упростить кодотменив использование BehaviorSubject следующим образом:

export interface UserSettings {
  dateFormat: string;
}

@Injectable()
export class SettingsService {

  // Database
  private settingsDocRef: AngularFirestoreDocument<any>;
  settingsDocument: Observable<any>;

  // User
  userID: string;

  // Form
  editForm = new FormGroup({});

  constructor(
    private readonly afs: AngularFirestore,
    fb: FormBuilder
  ) {
    this.editForm = fb.group({
      dateFormat: [],
    });
  }

  getSettingsData() {
    this.settingsDocRef = this.afs.doc(`settings/${this.userID}`);
    this.settingsDocument = this.settingsDocRef.snapshotChanges();
    this.settingsDocument.subscribe(value => {
      const userSettings = value.payload.data() as UserSettings;
      this.editForm.patchValue(userSettings);
    });
  }

}

И тогда вам просто нужно добавить formControlName к вашему шаблону.

<form [formGroup]="settingsService.editForm">
  <mat-select placeholder="Date Format" formControlName="dateFormat">
    <mat-option *ngFor="let dateFormat of dateFormats" [value]="dateFormat">
      {{dateFormat}}
    </mat-option>
  </mat-select>
</form>

Это должно решить вашу проблему,Вот Образец StackBlitz для вашего реф.Не имеет такой же код, как в вашем, например.Но должен дать вам контекст.

TL; DR; Вам просто нужно инициализировать FormControl значением, а затем добавить атрибут formControlName в шаблон формы, чтобы эта работа работала..