javascript - Angular 插值滞后于渲染某些值以及如何从 typescript 对象数组中删除一项

Question

我正在开发一个 ASP.NET Core - Angular 网络应用程序，我可以在其中选择一个客户作为起点，并使用 Google map 距离矩阵服务找到到其他人的距离和持续时间.我得到的值很好(我认为控制台日志证明延迟不是因为 google maps API 调用/从对象数组访问值)但是当我使用 angular 将数据绑定(bind)到模板时插值，它滞后于渲染距离和持续时间值。还要提一下，该表仅在单击按钮后显示 - 当 isFindButtonClicked 时变成 true .

1. 你能帮我找出原因并解决吗？

customers: Array<Customer> = [];
nearbyCustomers: Array<Customer> = [];

getCustomers() {
        this.customerService.getAll()
            .subscribe( result => {
                this.customers = result;
            }, error => {
                this.alertService.error(error._body);
                this.router.navigate(['/home']);
            });
}

ngOnInit() {
        this.getCustomers();
}

用于查找和分配距离/持续时间值的 Typescript 函数:

findNearbyCustomers(selectedId: number) {
    this.isFindButtonClicked = true;
    this.nearbyCustomers = this.customers;
    var origin = this.customers.find(c => c.id == selectedId);
    var originLatLng = origin.latitude.toString()+","+origin.longitude.toString();
    var service = new google.maps.DistanceMatrixService();

    for (let x = 0; x < this.customers.length; x++) {
            console.log(this.customers[x].id);
            var destinationLatLng = this.customers[x].latitude.toString()+","+this.customers[x].longitude.toString();

            service.getDistanceMatrix({
                origins: [originLatLng],
                destinations: [destinationLatLng],
                travelMode: google.maps.TravelMode.DRIVING
            }, (response, status) => {
                if (status.toString() == 'OK') {
                    console.log('Distance: '+response.rows[0].elements[0].distance.text+', Duration: '+response.rows[0].elements[0].duration.text);
                    this.nearbyCustomers[x].distance = response.rows[0].elements[0].distance.text;
                    this.nearbyCustomers[x].duration = response.rows[0].elements[0].duration.text;
                    console.log('DURATION: '+this.nearbyCustomers[x].duration+', DISTANCE:'+this.nearbyCustomers[x].distance);
                }
            })
    }
}

Angular 模板的部分标记:

<tbody>
       <tr *ngFor="let nearbyCustomer of nearbyCustomers">
            <td>{{ nearbyCustomer.businessName }}</td>
            <td>
                <p>{{ nearbyCustomer.streetNumber + ' ' + nearbyCustomer.streetName + ', ' + nearbyCustomer.suburb }}</p>
                <p>{{ nearbyCustomer.city + ' ' + nearbyCustomer.postCode + ', ' + nearbyCustomer.country }}</p>
            </td>
            <td>{{ nearbyCustomer.contactPerson }}</td>
            <td>{{ nearbyCustomer.contactNumber }}</td>
            <td>{{ nearbyCustomer.email }}</td>
            <td>{{ nearbyCustomer.distance }}</td>
            <td>{{ nearbyCustomer.duration }}</td>
      </tr>
 </tbody>

1. 此外，我以前尝试过使用 if 语句 if (this.customers[x].id != this.selectedDeliveryDestinationId)并且只推送不包括所选客户的客户(作为来源)this.nearbyCustomers.push(this.customers[x]);然后当我尝试为对象属性赋值并渲染时，它给了我 Cannot set property 'distance' of undefined错误 - 似乎我弄乱了索引值。为此，从数组中排除一项的最佳方法应该是什么？或者，如果我可以从 HTML 中隐藏一个特定的行，那也可以。

谢谢。

Answer 1

在这种情况下，您需要 ngZone 来更新您的表格。

import { NgZone } from '@angular/core';

在构造函数中添加:private _ngZone: NgZone 然后在你的 getDistanceMatrix 成功中:

this._ngZone.run(() => {
                this.nearbyCustomers[x].distance = response.rows[0].elements[0].distance.text;
                    this.nearbyCustomers[x].duration = response.rows[0].elements[0].duration.text;
            });

关于第二个问题我稍后会检查并编辑答案