Question

我在这里按照本教程https://codecraft.tv/courses/angular/http/http-with-observables/

这里我的代码，一切正常，但结果没有立即显示到html，当我输入'1'时，有一个正确的结果从数据库获取（通过console.log检查），但我必须输入或单击外部，或执行除结果显示之外的其他操作。如果我再键入一个字符'0'，则搜索项为'10'，结果显示，但结果是char'1'的结果，而我输入或单击外部，结果更新为'10'的结果。任何人帮助我

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import * as RxDBTypes from './type.RxDB';
import { DatabaseService } from './database.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import { StateType } from './interface';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  private myForm: FormGroup;
  private results: Observable<StateType[]>;
  private db: RxDBTypes.RxDatabase = null;

  constructor(private fb: FormBuilder, private databaseService: DatabaseService) {
    this.myForm = fb.group({
      'search': [''],
    });
  }

  async ngOnInit() {
    this.db = await this.databaseService.get();
    this.results = this.myForm.get('search').valueChanges
      .switchMap(term => this.db.state.findOne(term).$.map(value => {
        if (value) {
          return value.ch;
        }
      }));
  }
}

HTML

<form [formGroup]="myForm">
  <input type="search" formControlName="search">
</form>

<ul>
  <li *ngFor="let track of results | async">
    <a href="">{{ track.name }}</a>
  </li>
</ul>

Angular 5 Formcontrol valueChanges RxDB的Observable Search查询不显示结果权限

0 个答案: