Javascript 角度插值滞后于渲染某些值&；如何从typescript对象数组中删除一项

我正在开发一个ASP.NET Core-Angularweb应用程序，在该应用程序中，我可以选择一个客户作为来源，并使用谷歌地图距离矩阵服务查找与他人的距离和持续时间。我得到的值很好（我认为控制台日志证明延迟不是因为GoogleMapsAPI调用/访问对象数组中的值），但是当我使用角度插值将数据绑定到模板时，它会延迟渲染距离和持续时间值。同样值得一提的是，表格仅在单击按钮后显示-当

isFindButtonClicked

变为

true

时

你能帮我找到原因并解决它吗

客户：数组=[]；
nearbyCustomers:Array=[]；
getCustomers（）{
this.customerService.getAll（）
.订阅（结果=>{
这就是结果；
}，错误=>{
this.alertService.error（error.\u body）；
this.router.navigate（['/home']）；
});
}
恩戈尼尼特（）{
这个.getCustomers（）；
}

用于查找和分配距离/持续时间值的键入脚本函数：

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);
                }
            })
    }
}

<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>

findNearbyCustomers（选择edid: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（设x=0；x{
如果（status.toString（）=='OK'）{
console.log（'Distance:'+response.rows[0]。元素[0]。Distance.text+'，持续时间：'+response.rows[0]。元素[0]。持续时间.text）；
此.nearbyCustomers[x].distance=response.rows[0].elements[0].distance.text；
此.nearbyCustomers[x]。持续时间=响应。行[0]。元素[0]。持续时间.text；
console.log（'DURATION:'+this.nearbyCustomers[x].DURATION+'，DISTANCE:'+this.nearbyCustomers[x].DISTANCE）；
}
})
}
}

角度模板的部分标记：

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);
                }
            })
    }
}

<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>

{{nearbyCustomer.businessName}
{{nearbyCustomer.streetNumber+''+nearbyCustomer.streetName+'，'+nearbyCustomer.郊区}

{{nearbyCustomer.city+'+nearbyCustomer.postCode+'，'+nearbyCustomer.country}

{{nearbyCustomer.contactPerson}
{{nearbyCustomer.contactNumber}
{{nearbyCustomer.email}
{{nearbyCustomer.distance}
{{nearbyCustomer.duration}

同样在前面，我也尝试过使用if语句

if（this.customers[x].id！=this.selectedDeliveryDestinationId）

，只推送客户，不包括所选客户（作为源站）

this.nearbyCustomers.push（this.customers[x]）然后，当我试图为对象属性赋值并渲染时，它给了我
无法设置未定义的属性“距离”的错误-似乎我弄乱了索引值。为此，从数组中排除一个项的最佳方法是什么？或者，如果我可以从HTML中隐藏一个特定的行，那也可以

---

谢谢。

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

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

在构造函数中添加：

private\u 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;
            });

---

关于第二个问题，我将稍后检查并编辑答案，我建议使用管道过滤当前选定的nearbyCustomer

<tbody>
    <tr *ngFor="let nearbyCustomer of nearbyCustomers | nearbyCustomerFilter">
        <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>

{{nearbyCustomer.businessName}
{{nearbyCustomer.streetNumber+''+nearbyCustomer.streetName+'，'+nearbyCustomer.郊区}

{{nearbyCustomer.city+'+nearbyCustomer.postCode+'，'+nearbyCustomer.country}

{{nearbyCustomer.contactPerson}
{{nearbyCustomer.contactNumber}
{{nearbyCustomer.email}
{{nearbyCustomer.distance}
{{nearbyCustomer.duration}

创建一个服务，该服务提供有关管道附近当前选定客户的信息

---

然后，每当您选择另一个客户时，您的列表就会更新，管道会将此特定条目从当前视图中踢出。

谢谢您的回答。NgZone帮助解决了变更检测滞后的问题。对于我问题的第二部分，这里是我如何修复它的（不确定这是否是最好的解决方案，但对我来说效果很好）

我已经过滤了客户，并且只分配了除所选值之外的值，如下所示：

this.nearbyCustomers=this.customers.filter（c=>c.id！=this.selectedDeliveryDestinationId）。这样，我只需在nearbyCustomers数组中循环，不包括源代码，从而在每个循环中节省一个API调用浪费：-）

findNearbyCustomers（）{
this.isFindButtonClicked=true；
this.nearbyCustomers=this.customers.filter（c=>c.id！=this.selectedDeliveryDestinationId）；
var origin=this.customers.find（c=>c.id==this.selectedDeliveryDestinationId）；
var originLatLng=origin.latitude.toString（）+“，“+origin.longitude.toString（）；
var service=new google.maps.DistanceMatrixService（）；
for（设x=0；x