按角度清除和替换数组中的值答案

【问题标题】：Clear and replace value which are in array by angular按角度清除和替换数组中的值
【发布时间】：2019-09-30 07:27:02
【问题描述】：

我想计算两个人之间的距离并将它们写在网页上。当我在 html 上写值时，代码被推送不止一个，但我不希望这样。我要换新的

this.db.list("Users/subscribed/" + user.uid + "/members").snapshotChanges().subscribe(items => {
          items.forEach(item => {
            let container = {
              lat: 0,
              lng: 0,
              distance: "0",
            }
            let child = item.payload.child("locations")
            child.forEach(element => {
              if (element.key === "lat") {
                container.lat = element.toJSON() as number
              }
              else if (element.key == "lng") {
                container.lng = element.toJSON() as number
              }
            })
            this.fbGetLoc(user.uid).then(result => {
              this.lat = result.val()

              this.fbGetLoc2(user.uid).then(result2 => {
                this.lng = result2.val()
              })
            }).then(() => {

                container.distance = this.calculate(this.lat, this.lng, container.lat, container.lng) as any    

            })
            this.MemberLocation.push(container)

          })
        })


         <div class="list-group ; text-center " *ngFor="let distance of MemberLocation">                   
                  <a class="list-group-item pt-5">         
                      <strong>Tahmini Uzaklık: {{distance.distance}} km 
                    </strong>           
                  </a>
                </div>

【问题讨论】：

标签： angular typescript firebase firebase-realtime-database ngfor

【解决方案1】：

通过将MemberLocation 放在 forEach 语句中，我真的不理解上述代码中的逻辑，这最终会在迭代时为您提供一个新值。但是，我认为对于这个用例，您应该使用变量而不是数组，如下所示：

import { Component, OnInit, ViewChild } from '@angular/core';

interface Location {
  lat: number;
  lng: number;
  distance: any;
}

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  MemberLocation: Location;

  constructor() { }

  ngOnInit() {
    this._calculateDistance();
  }

  private _calculateDistance() {
    this.db.list("Users/subscribed/" + user.uid + "/members").snapshotChanges().subscribe(items => {
      items.forEach(item => {
        // Your calculation logic here

        // You can set the data on this location field
        this.MemberLocation = container;
      });
    });
  }

}

在你的 html 中你可以这样做

<div class="list-group text-center">                   
    <a class="list-group-item pt-5" *ngIf="MemberLocation">         
        <strong>Tahmini Uzaklık: {{MemberLocation?.distance}} km</strong>           
    </a>
</div>

【讨论】：