Question

基于是否选中此复选框，需要更改垫自动完成的值。取消选中该复选框时，自动完成功能应显示活动程序。并且选中此复选框后，自动完成功能应显示不活动的程序。

我看到的问题的步骤是：

好像我需要在选中或取消选中此框之后将filteredOptions列表设置为一个空列表。

代码如下：

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)
              );
  }

}

Answer 1

按以下方法移动CheckBox状态后，您需要重置数组'programNames'。由于.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;
        });
    }
}

希望它有助于解决您的问题！

根据复选框更改垫子自动完成值

1 个答案: