Как обновить Observableзначение в угловых

Question

Может быть, я что-то упустил.Я не могу найти простой учебник для Observable и его синтаксиса.Я работаю с Angular, я вызываю функцию getCampaigns() при изменении значения поля ввода Программы, чтобы обновить поле ввода списка автозаполнения кампаний. Пожалуйста, обратитесь к изображению для визуального описания

Текущий сценарий:

Когда я изменил значение поля ввода Программы вместо обновления списка автозаполнения входных кампаний, он объединяет новые значения с предыдущими значениями списка автозаполнения: см. Пример ниже дляподробности:

Значение программы: P1
Значения автозаполнения кампании: [C1, C2, C3].

Значение программы: P2
Значения автозаполнения кампании: [C4, C5, C6].

Когда я изменил значение программы с P1 на P2, список автозаполнения объединяется: [C1, C2, C3, C4, C5, C6]

Вместо только просмотраЗначения списка кампаний P2.

Ожидание:

Список автозаполнения должен обновляться каждый раз, когда пользователь изменяет значение программы, и отображать только те кампании, которые связаны сНовое значение программы.

Пожалуйста, найдите код ниже:

  filteredPrograms: Observable<string[]>;
  filteredCampaigns: Observable<string[]>;

  ngOnInit() {

    //Filters program when user typed
    this.filteredPrograms = this.taskDetailForm.get('program').valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(this.programs, value))
    );

    //Filters campaigns when user typed
    this.filteredCampaigns = this.taskDetailForm.get('campaign').valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(this.campaigns, value))
      );


  }

   //Get Autocomplete list of campaigns
   getCampaigns(){

    let selectedProgram = this.taskDetailForm.get('program').value;

    this.deliverablesService.getCampaigns(selectedProgram).valueChanges()
    .subscribe(campaigns => {
        this.campaignRef = campaigns;
        this.campaignRef.forEach(campaign => {
          if(!this.campaigns.includes(campaign.campaign_name)) 
                  this.campaigns.push(campaign.campaign_name)
      })

    })

  }

HTML-код:

<div class="mat-form-field-wrapper">
      <mat-form-field appearance="outline">
        <mat-label>Program</mat-label>
        <input formControlName="program" 
               matInput 
               [matAutocomplete]="auto" 
               (change)="getCampaigns()"  >
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of filteredPrograms | async" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
          <mat-error>Invalid Program Name</mat-error>
      </mat-form-field>
      <mat-form-field appearance="outline" class="mr-0">
          <mat-label>Campaign</mat-label>
          <input formControlName="campaign" 
                 matInput
(change)="getDeliverables()"
                 [matAutocomplete]="auto1">
          <mat-autocomplete #auto1="matAutocomplete">
              <mat-option *ngFor="let campaign of filteredCampaigns | async" [value]="campaign">
                {{campaign}}
              </mat-option>
          </mat-autocomplete>
        </mat-form-field>

  </div>

Заранее спасибо!

Answer 1

Спасибо Evaldas за приложенные усилия.Однако я выясняю, что я сделал не так.

Мне просто нужно очистить кампании из массива campaigns.

getCampaigns(){

    let selectedProgram = this.taskDetailForm.get('program').value;

    this.deliverablesService.getCampaigns(selectedProgram).valueChanges()
    .subscribe(campaigns => {
        this.campaignRef = campaigns;
        this.campaigns = [];
        this.campaignRef.forEach(campaign => {
          if(!this.campaigns.includes(campaign.campaign_name)) 
                  this.campaigns.push(campaign.campaign_name)
      })

    })

  }

Добавлено this.campaigns = [];, прежде чем вводить новые значения.

Answer 2

Если я вас правильно понял, вы можете использовать оператор switchMap.Это может быть потенциальным примером:

this.filteredCampaigns = this.taskDetailForm.get('program').valueChanges.pipe(
    switchMap(()=> {
        return this.taskDetailForm.get('campaign').valueChanges.pipe(
            startWith(''),
            map(value => this._filter(this.campaigns, value))
        );
    })
);