角度 2 - (键控)不起作用 - 英雄之旅

Question

我做了一个英雄教程之旅，在我的项目(keyup(事件中不起作用。

当我输入第一个字母时，角度正在发送请求，而下一次按下后不发送。我在浏览器控制台中看到请求的结果。

<div id="search-component">
<h4>Search products</h4>
<input #searchBox id="search-box" (keyup)="search(searchBox.value)"/>
<div>
    <div *ngFor="let product of products | async" (click)="gotoDetail(product)" class="search-result">
        {{product.name}}
    </div>
</div>

@Component({
    selector: 'product-search',
    templateUrl: './product-search.component.html',
    styleUrls: [ './product-search.component.css' ],
    providers: [ ProductSearchService ]
})
export class ProductSearchComponent implements OnInit {
    projects: Observable<Product[]>;
    private searchTerms = new Subject<string>();
    constructor(
        private productSearchService: ProductSearchService,
        private router: Router
    ) {}
    search(term: string): void {
        this.searchTerms.next(term);
    }
    ngOnInit(): void {
        this.products = this.searchTerms
            .debounceTime(300)
            .distinctUntilChanged()
            .switchMap(
                term => term ? 
                this.productSearchService.search(term) : 
                Observable.of<Product[]>([])
            )
            .catch(error => {
                console.log(error);
                return Observable.of<Product[]>([]);
            })
    }
    gotoDetail(product: Product): void {
        const link = ['/detail', product.id];
        this.router.navigate(link);
  }
}

Answer 1

像在你的html中一样设置它

//.HTML

<input [(ngModel)]="searchBox" id="search-box" (keyup)="search(event)"/>

作曲网

searchBox: string//在构造函数之前声明到组件中

在构造函数之后声明到组件中

@HostListener('document:keyup', ['$event'])
    search(event: KeyboardEvent): void {
      this.searchTerms.next(this.searchBox);
    }

Answer 2

因为您的searchBox变量实际上是组件的ViewChild。

尝试改用这个：

<input [(ngModel)]="searchBox" id="search-box" (keyup)="search(searchBox)"/>