角度插值滯后呈現一些值以及如何從打字稿對象數組中刪除一項

Question

我正在使用ASP.NET Core-Angular Web應用程序，在這里我可以選擇客戶作為來源，並使用Google Maps距離矩陣服務查找與他人的距離和持續時間 。 我得到的值很好（ 我認為控制台日志證明滯后不是由於google maps API調用/從對象數組訪問值 ），但是當我使用角度插值將數據綁定到模板時，它滯后於渲染距離和持續時間值。 另外要提一下，該表僅在單擊按鈕后才顯示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);
                }
            })
    }
}

角度模板的部分標記：

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

2. 同樣在以前，我嘗試使用if語句if (this.customers[x].id != this.selectedDeliveryDestinationId)並僅推送不包括所選客戶（作為來源）的客戶this.nearbyCustomers.push(this.customers[x]); 然后，當我嘗試為對象屬性分配值並進行渲染時，它給我Cannot set property 'distance' of undefined錯誤的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;
            });

關於第二個問題，我待會再檢查並編輯答案

Answer 2

感謝您的回答。 NgZone幫助解決了變更檢測滯后問題。 對於我的問題的第二部分，這是我的解決方法（不確定這是否是最佳解決方案，但對我來說效果很好）

我已經過濾了客戶，僅分配了價值，除了選定的價值，像這樣： this.nearbyCustomers = this.customers.filter(c => c.id != this.selectedDeliveryDestinationId); 。 這樣，我只需要遍歷不包括起點的附近客戶數組-在每個循環中節省一個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 (let x = 0; x < this.nearbyCustomers.length; x++) {
            var destinationLatLng = this.nearbyCustomers[x].latitude.toString()+","+this.nearbyCustomers[x].longitude.toString();        
            service.getDistanceMatrix({
                origins: [originLatLng],
                destinations: [destinationLatLng],
                travelMode: google.maps.TravelMode.DRIVING
            }, (response, status) => {
                if (status.toString() == 'OK') {
                    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;
                    })
                }
            })
        }
    }

Answer 3

我建議使用管道過濾當前選定的附近的客戶。

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

創建一個服務，該服務向管道提供有關當前選定的鄰近客戶的信息。

然后，每當您選擇另一個客戶時，您的列表都會被更新，並且管道會將特定條目踢出當前視圖。