Очистите и замените значение в массиве на угловое - PullRequest
Новая
       18

Очистите и замените значение в массиве на угловое

1 голос
/ 13 мая 2019

Я хочу рассчитать расстояние между двумя людьми и написать их на веб-странице.В то время как я пишу значение в 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>

1 Ответ

0 голосов
/ 13 мая 2019

Я действительно не понял логику в приведенном выше коде, поместив 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>
...