Question

我有一个带有多个标记的Angular Google Map（AGM）组件，以及一个包含与标记一样多的行的Material Table（材料表）。

当单击AGM标记时，我在行为主体中设置了当前活动的Data_file_id（唯一标识物料表中的每个数据行）。

我计划使Angular Material表订阅该行为主题，然后高亮显示包含Data_file_id的唯一一行，并且具有不同的行颜色。我目前无法正常工作。这是我目前拥有的：

包含BehaviorSubject的服务的代码段：

  private activeMarkerSubject: BehaviorSubject<number> = new BehaviorSubject(0);
  activeMarker$ = this.activeMarkerSubject.asObservable();

  setActiveMarker(value: number) {
    this.activeMarkerSubject.next(value);
  }
...

这是表格摘要：


<!-- TABLE -->
<div class="mat-elevation-z0 table-wrapper">
  <table mat-table class="full-width-table" matSort aria-label="Elements">
    <!-- Generic static columns that'll always be there-->
    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
      <th mat-header-cell *matHeaderCellDef>
        {{column | formatHeaderForOutput: question_lookup_table | removeUnderScore}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>

    <!-- <ng-container cdkColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *cdkCellDef="let row">
        <button mat-raised-button color='accent'>Sections</button>
      </td>
    </ng-container> -->

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="data-row-style" 
    [ngClass]="{'highlight': selectedRowIndex == row.Data_File_Id}"
    ></tr>
  </table>

  <mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="10"
    [pageSizeOptions]="[10, 25, 50, 100, 250]" showFirstLastButtons>
  </mat-paginator>
</div>

我打算通过标记点击事件将selectedRowIndex设置为BehaviorSubject的新值：

<!-- GOOGLE MAP-->
        <div class="mat-elevation-z4">
          <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">

            <agm-marker *ngFor="let m of markers; let i = index" [latitude]="m.lat" [longitude]="m.lng" (markerClick)="updateActiveMarker(m);">

              <!-- <agm-info-window>
                <strong>Info Window content like address?</strong>
              </agm-info-window> -->
            </agm-marker>
          </agm-map>
        </div>

在包含地图的组件中：

updateActiveMarker(marker) {
    console.log(marker);
    this.mapService.setActiveMarker(marker.datafileId);
  }

...

然后在包含表的组件中：

...
this.subscription.add(this.mapService.activeMarker$.subscribe(m => {
      console.log(`the marker: ${m}`);
      this.selectedRowIndex = m;
    }))

....

请注意，地图和表格位于单独的组件中，它们通过BehaviorSubject进行通信。单击地图上的标记时，更新会正确发出，但我无法使表确认新值已经到来并设置css类highlight。

根据BehvorSubject值突出显示单个“角度材料表”行

0 个答案: