Question

我认为我的标题很难描述我遇到的问题。我将在这里逐步解决问题。

首先，我有一个带有一些标记的google map，我计划有一个功能，该功能可以根据我当前的位置显示附近标记的列表，并可以选择距离半径来显示不同的列表。

例如，默认情况下，距离半径为20 kms，然后我附近有四个商店A，B，C和D，其中A距我7公里，B为6，C为1，D为0。当我将距离半径更改为5km时，我附近应该只有2家商店，分别是C和D。

对于html端，

//select radius
      <mat-select [(ngModel)]="selectedRadius" (ngModelChange)="onSelectedChange($event)" class="qtr-width selectRadius">
        <mat-option value="5">5 kms</mat-option>
        <mat-option value="10">10 kms</mat-option>
        <mat-option value="20">20 kms</mat-option>
        <mat-option value="30">30 kms</mat-option>
        <mat-option value="40">40 kms</mat-option>
        <mat-option value="50">50 kms</mat-option>
      </mat-select>

//nearest store list
        <mat-list-item *ngFor="let item of nearList">
            <mat-icon mat-list-icon>store</mat-icon>
            <h4 mat-line>{{item.label}}</h4>
        </mat-list-item>

对于ts文件，我可以捕获此函数更改的值。

  onSelectedChange(e) {
console.log(e)
this.selectedRadius = e;

}

然后我有一个clickEvent changeToCurrent（）来显示我的当前位置，并对最近的商店列表进行计算。

changeToCurrent() {
     navigator.geolocation.getCurrentPosition( (position) => {

        if (position && position.coords) {


          this.currentPossition = {
            Latitude: position.coords.latitude,
            Longitude: position.coords.longitude
          }
          this.center = this.currentPossition;
          this.zoom = 10;


          this.positions.map((item, index) => {
            if (JSON.stringify(_this.positions[index]) === JSON.stringify(_this.positions[index+1])) {
              a.push(item);
            }
          })
          a.map((item, index) => {
            let d = this.getDistanceFromLatLonInKm(item.Latitude, item.Longitude, this.currentPossition['Latitude'], this.currentPossition['Longitude']);
            if (d < Number(this.selectedRadius)) {
              let b = {
                label: a[index]['label'],
                distance: Math.round(d),
                ID: a[index]['item']['ID']
              }
              this.nearList.push(b)
            }
          })
}

但是，我不知道如何在changeToCurrent（）中更新this.selectedRadius。

顺便说一句，我知道如果我有一个用于此选择的父组件，并将其作为输入传递给子组件以显示列表，然后使用ngOnchange（）解决问题，它将可以正常工作。

但是在这里我的情况下是行不通的。

需要更好的解决方案来解决此问题。

感谢您的帮助。

如何通过mat-select捕获更改的值并将其应用于其他功能

0 个答案: