valueChanges 被调用但不应该是 Angular

问题描述

我的页面上目前有两个“自动完成”类型选择器。 一个选择“名称”，另一个选择“标签”。 选择名称后，我会在标签选择器中加载与此名称对应的标签。

当我删除“名称”时，标签也被删除。 (patch value to '',指定不执行valechange...但它被启动...)

问题是一个请求是通过以下方式发起的： this.filteredOptions2 = this.imageTag.valueChanges

虽然我在上面放了一个红豆杉，但如果我们没有填写任何名字，那么就不会进行处理。 不幸的是，处理仍在执行，当然会产生http错误...

感谢您的帮助！

TS 文件：

export class ... {
  ...

  options: any = [];
  options2: any = [];

  filteredOptions: Observable<any[]>;
  filteredOptions2: Observable<any[]>;

  image = new FormControl();
  imageTag = new FormControl();

  constructor(..){
  }

  ngOnInit() {
    this.containerForm = this.formBuilder.group({
      ...
      image: this.image,imageTag: this.imageTag,...
    });  
    
    
    this.filteredOptions = this.image.valueChanges.pipe(
      startWith(''),debounceTime(400),distinctUntilChanged(),switchMap(val => {
            return this.filter(val || '')
       }) 
    )     
  }

  searchTagOfImage(): void{ 
    if(this.containerForm.controls.image.value){

      this.filteredOptions2 = this.imageTag.valueChanges.pipe(
        startWith(''),switchMap(val => {

         //////////////////////// console.log("fired here,should not be !");/////////////

              return this.filter2(val || '')
        }) 
      )  
    } 
  }

  filter(val: string): Observable<any[]> {
    console.log("toutes les images");
    // call the service which makes the http-request
    return this.dataService.getimagesAvailable()
     .pipe(
       map(response => response.filter(option => { 
         return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
       }))
     )
  } 


  filter2(val: string): Observable<any[]> {
    // call the service which makes the http-request
   /////////console.log("IT GOES HERE,BUT SHOULD NOT ! Because this.image.value is empty..");///////////
    return this.dataService.getTagsOfImage(this.image.value)
     .pipe(
       map(response => response.filter(option => { 
         return option.tag.toLowerCase().indexOf(val.toLowerCase()) === 0
       }))
     )      
  }  

  displayFn(user: any): string {
    return user && user.name ? user.name : '';
  }

  displayFn2(user: any): string {
    return user && user.tag ? user.tag : '';
  }

  deleteVariable(variable: string,e?,i?): void {
    
    switch (variable) {
      ...
      case 'image':
        this.containerForm.controls.imageTag.patchValue('',{ emitEvent: false });
        this.containerForm.controls.image.patchValue('',{ emitEvent: false });
        break;
      case 'imageTag':
        this.containerForm.controls.imageTag.patchValue('',{ emitEvent: false });
        break;
      default:
        break;
    }
  } 
 }
}

HTML 端：

<div class="col-md-3">
                <div class="form-group">
                  <label for="inputimageName" class="label">Image du conteneur</label>
                  <nb-form-field>
                    <input [formControl]="image" nbInput fullWidth type="text" placeholder="Image du conteneur" [nbAutocomplete]="auto" />
                    <button nbSuffix nbButton ghost type="button" (click)="deleteVariable('image')">
                      <i class="fas fa-times"></i>
                    </button>
                  </nb-form-field>
                  <nb-autocomplete #auto [displayWith]="displayFn" (selectedChange)="searchTagOfImage()">
                    <nb-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                      {{ option.name }}
                    </nb-option>
                  </nb-autocomplete>
                </div>
              </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）