Машинопись и неверный тип внутри обработчика кликов - PullRequest
0 голосов
/ 19 октября 2018

Мой TypeScript

export class CustomerUIModel implements CustomerIntrerfaces.ICustomerUI {

    public customers: KnockoutObservableArray<CustomerIntrerfaces.ICustomer>;
    service: CustomerIntrerfaces.ICustomerService;



    constructor(svc: CustomerIntrerfaces.ICustomerService, data: CustomerIntrerfaces.ICustomer[]) {
        this.service = svc;
        this.customers = ko.observableArray(data);
    }

    public AddCustomer(elem: CustomerIntrerfaces.ICustomer): void {
        this.service.Insert(elem)
            .then(cRes => {
                this.customers.push(elem);
            })
            .catch(r => {
                alert(r.message);
            });
    }
}}

Мой HTML:

        <tbody data-bind="foreach: customers">
        <tr>
            <td><input type="text" class="form-control" size="5" data-bind="value: CustomerID" /></td>
            <td><input type="text" class="form-control" data-bind="value: CompanyName" /></td>
            <td><input type="text" class="form-control" data-bind="value: ContactName" /></td>
            <td><input type="text" class="form-control" data-bind="value: Country" /></td>
            <td>
                <input type="button" class="form-control" value="Insert" data-bind='click: $root.AddCustomer' />
                <input type="button" class="form-control" value="Delete" data-bind='click: $root.DeleteCustomer' />
            </td>
        </tr>
    </tbody>

Когда я нажимаю "Вставить", я попадаю в AddCustomer (), но this.service NULL, а также клиентов .Более того, «this» имеет CustomerIntrerfaces.ICustomer, а не CustomerIntrerfaces.ICustomerService, как я ожидаю.Как я могу это исправить?

1 Ответ

0 голосов
/ 19 октября 2018

Похоже, что Knockout не вызывает метод AddCustomer с нужным вам контекстом this.См. эту тему .Вы можете заставить this контекст быть вашим CustomerUIModel объектом, привязав метод следующим образом:

public AddCustomer = (elem: CustomerIntrerfaces.ICustomer): void => {
    this.service.Insert(elem)
        .then(cRes => {
            this.customers.push(elem);
        })
        .catch(r => {
            alert(r.message);
        });
}

См. этот FAQ для получения дополнительной информации об общей проблеме.

...