小编ver*_*ida的帖子

我对Kendo UI AutoComplete组件感到疯狂.我正在使用自己的函数来使用jQuery访问数据,因此我必须将AutoComplete dataSource.transport.read设置为函数.代码是这样的.

minLengthAtocomplete = 3;

$('#autocomplete').kendoAutoComplete({
    minLength : 3,
    filter : "contains",
    dataValueField : "key",
    dataTextField : "value",
    dataSource : new kendo.data.DataSource({
        transport : {
            read : _OnTransportRead
        },
        schema : {
            /* object schema */
        }
    })
});

function _OnTransportRead(e) {
    var text = $.trim(e.data.filter.filters[0].value);

    if (text && text.length >= minLengthAtocomplete) {
        _GetUsers(
            text,
            function onSuccess(data) {
                var users = [];
                 /* sets users with info in data */
                e.success(users);
            },
            function onError(error) {
                /* stuff with …

自从我将一些应用程序从 Angular 2 迁移到 4 后，我注意到一个恼人的行为。通过用户操作完成的每个 HTTP 请求都会导致浏览器刷新。下面的代码重现了该错误。

服务：

@Injectable()
export class ProductService() {

    constructor(private _http: Http) { }

    toggleFav(product: Product): Observable<Product> {
        let data = { "fav": !product.fav };
        this._http
            .patch(`api/products/${product.id}`, data)
            .map((r: Response) => r.json() as Product);
    }
}

组件：

@Component({...})
export class ProductComponent {

    product: Product;

    constructor(private _productService: ProductService) { }

    fav(): void {
        this._productService
            .toggleFav(product)
            .subscribe((updatedProduct: Product) => {
                this.product = updatedProduct;
            });
    }
}

模板：

<div>
    ...
    <button type="button" (click)="fav()">
        <i [ngClass]="{ 'fav-on': product.fav, 'fav-off': …