Изменение значений автозаполнения матов на основе флажка - PullRequest
0 голосов
/ 25 марта 2019

В зависимости от того, установлен флажок или нет, значения для автозаполнения мата необходимо изменить. Если флажок снят, при автозаполнении должны отображаться активные программы. И когда флажок установлен, автозаполнение должно показывать неактивные Программы.

Этапы проблемы, которую я вижу:

Это как если бы мне нужно было установить список фильтруемых опций на пустой список после того, как я установил или снял флажок.

Вот код:

programs.component.html:

<form>
  <mat-form-field>
    <input type="text" placeholder="ProgramName" aria-label="ProgramName"
      matInput [formControl]="programNamesControl" [matAutocomplete]="auto" size="14" >
      <mat-autocomplete #auto="matAutocomplete" (optionSelected)='getSelectedProgram($event.option.value)' >
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option" width:100px>
          {{option}}
        </mat-option>
      </mat-autocomplete>
  </mat-form-field>&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="checkbox" (change)="showInactivePrograms()" [(ngModel)]="programChecked" name="programChecked">
  <br/>
  <app-program-detail [programNameSelected]="programNameSelected" *ngIf="loadProgramDetails"></app-program-detail>
</form>

programs.component.ts

import { ProgramService } from './../program.service';
import { Component, OnInit, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { Program } from '../program';

@Component({
  selector: 'app-programs',
  templateUrl: './programs.component.html',
  styleUrls: ['./programs.component.css']
})
export class ProgramsComponent implements OnInit {
  programNamesControl = new FormControl();
  programNames: string[] = [];
  filteredOptions: Observable<string[]>;
  programNameSelected: string;
  loadProgramDetails: boolean;
  programs: Program[] = [];
  programChecked: boolean;

  constructor(private programService: ProgramService) {

  }

  ngOnInit() {
    this.programService.getActiveProgramNames().subscribe(data => {
      this.programNames = data;
    });

    this.filteredOptions = this.programNamesControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  _filter(value: string): string[] {
    console.log('Inside filter..');
    return this.programNames.filter(programName =>
      programName.toLowerCase().includes(value.toLowerCase())
    );
  }

  getSelectedProgram(programNameVal) {
    this.loadProgramDetails = true;
    this.programNameSelected = programNameVal;
    console.log('Program Selected is: ' + this.programNameSelected);
  }

  showInactivePrograms() {
    if (this.programChecked) {
      this.programService.getInActiveProgramNames().subscribe(data => {
        this.programNames = data;
      });
    }
    else {
      this.programService.getActiveProgramNames().subscribe(data => {
        this.programNames = data;
      });
    }
  }
}

program.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { Program } from './program';

@Injectable({
  providedIn: 'root'
})
export class ProgramService {

  constructor(private httpClient: HttpClient) { }

  getPrograms(): Observable<Program[]> {
    return this.httpClient.get<Program[]>(environment.apiBaseURL + 'api/Program')
                   .pipe(
                     map(data => data)
                   );
  }

  getActiveProgramNames(): Observable<string[]> {
    return this.getPrograms()
               .pipe(
                 map(data => data.filter(program => program.IsActive === 'Y'))
               )
               .pipe(
                 map(data => data.map(program => program.ProgramName.toString()))
               );
  }

  getInActiveProgramNames(): Observable<string[]> {
    return this.getPrograms()
               .pipe(
                 map(data => data.filter(program => program.IsActive === 'N'))
               )
               .pipe(
                 map(data => data.map(program => program.ProgramName.toString()))
               );
  }


  getProgram(programName: string): Observable<Program> {
    return this.httpClient.get<Program>(environment.apiBaseURL + 'api/Program?programName=' + programName)
              .pipe(
                map(data => data)
              );
  }

}

1 Ответ

0 голосов
/ 25 марта 2019

Вам необходимо сбросить массив 'programNames', как только вы сдвинете состояние CheckBox следующим способом. Поскольку .subscribe () или другие методы обратного вызова имеют асинхронный характер. Эти асинхронные методы не будут применять немедленный эффект при переключении CheckBox до тех пор, пока не будет запущено событие подписки.

showInactivePrograms() {
    this.programNames = [];
    if (this.programChecked) {
        this.programService.getInActiveProgramNames().subscribe(data => {
        this.programNames = data;
    });
    }
    else {
        this.programService.getActiveProgramNames().subscribe(data => {
            this.programNames = data;
        });
    }
}

Надеюсь, это поможет решить вашу проблему!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...