Question

编辑：以下问题是重复的。尽管我尽最大努力读取其他线程，但我没有考虑作用域上下文，因此花了数小时使用错误的关键字来找到解决方案。错误得到响应后，我确保标记了有用的响应。我的帐户已被封锁。如果管理员可以为我提供更多建议，那将不胜感激。我不知道可以在此线程中添加更多内容。

我正在使用ng-bootstrap ngbTypeahead：

HTML：

<input id="typeahead-config"
               class="form-control" 
               [ngbTypeahead]="search" 
               name="muni"
               [(ngModel)]="filter.muni"
               required/>

TS：

    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => term.length < 2 ? []
        : this.options.filter(v => v.toLowerCase().startsWith(term.toLocaleLowerCase())).splice(0, 10))
    )

我从一个空的选项数组开始，然后在ngOnInit中调用以下函数：

public getMunicipalities(){
    return this.httpClient
            .get(
              'http://localhost:8080/api/municipalities'
            )
            .pipe(map((data: any) => data.map(e => e = e.name)))
            .subscribe(
              function (xhr) {
                this.options =  xhr;
                console.log(this.options);
              },
              function (err) {
                  // Log the error
              },
            );



  }

选项数组已更新，但是ngbTypeahead无法识别新值。在调试过程中，我创建了一个替代的硬编码值数组（而不是一个空数组），发现那些原始值连续显示在dom中。

很显然，我有很多东西要学习，但是我找不到类似的线程来说明我希望这是一个简单的错误...

Answer 1

this的范围在原始函数内变化。请改用箭头功能

public getMunicipalities(){
    return this.httpClient
            .get(
              'http://localhost:8080/api/municipalities'
            )
            .pipe(map((data: any) => data.map(e => e = e.name)))
            .subscribe(
              (xhr) => {
                this.options =  xhr;
                console.log(this.options);
              },
              (err) => {
                  // Log the error
              },
            );
  }

RxJS Map无法识别更新的数组值

1 个答案: