Question

我将多个输入及其事件分组到组件模板中，如下所示：

<tr (input)="onSearchObjectChange($event)">
    <th><input [(ngModel)]="searchObject.prop1"></th>
    <th><input [(ngModel)]="searchObject.prop2"></th>
    ...
</tr>

现在我想在onSearchObjectChange()之外创建一个Observable，它应该得到Promise的结果。我该怎么做？还是有更好的方法来使用Observable？我也可以使用对象的distinctUntilChanged()函数吗？

我尝试用模板变量解决它：

<tr #search >
<th><input [(ngModel)]="searchObject.prop1"></th>
<th><input [(ngModel)]="searchObject.prop2"></th>
...
</tr>

在ViewChild的帮助下：

@ViewChild('search') search;

ngAfterViewInit() {
    Observable.fromEvent(this.search, 'input')
        .subscribe(() => console.log("help"));
}

但它不起作用......

Answer 1

import {Component, AfterViewInit, ViewChild, ElementRef} from '@angular/core';
import {Observable} from "rxjs";

@Component({
    selector: 'search',
    templateUrl: './search.html',
    styleUrls: ['./search.css'],
    providers: []
})
export class SearchComponent implements AfterViewInit {
@ViewChild('search') search: ElementRef;

constructor() {
}

ngAfterViewInit() {
    Observable.fromEvent(this.search.nativeElement, 'input')
        .subscribe(() => alert("It works!"))
}
}

Angular 2：可从多个事件或事件处理程序中观察到

1 个答案: