角材料，选择 mat-list-option 并显示所选 mat-list-option 的相应数据

Question

当用户将鼠标悬停在 table 的第一列上时，会出现一个工具提示，底部有一个按钮。

单击按钮后，将打开 angular mat-dialog，其中在 mat-dialog 的左侧具有第一列数据。

我需要实现两件事

1) 在 mat-dialog 的左侧，默认情况下应选择 mat-list-option，具体取决于用户悬停在哪一行上并单击其工具提示按钮。

2) mat-dialog 的右侧需要填充与左侧选择的 mat-list-option 相关的“conditionals”、“offset”、“alert”属性数据。

例如：在表格中，用户将鼠标悬停在 1 分钟数据（在警报列下）并在工具提示打开后单击按钮，在垫子对话框中应选择 1 分钟数据行，并在右侧选择其各自的“条件”，“ offset","alert" 数据应加载，因此应根据所选的 mat-list-option 相应地加载其各自的“条件”数据。

我已经强制执行一次只能选择一个 mat-list-option

警报对话框.component.html

<div [ngStyle]="{'width':'50%','border':'1px solid yellow','margin-right':'15px','height':'100%'}">
        <h3>LEFT</h3>
        <div class="alert-select">
            <mat-selection-list #preDefAlertList>
                <mat-list-option *ngFor="let preDef of data.data" [value]="preDef">
                  {{preDef.Alert}}
                </mat-list-option>
            </mat-selection-list>
        </div>  
</div>

<div [ngStyle]="{'width':'100%','border':'1px solid red'}">
        <h3>Edit JSON</h3>
        <div class="makeEditable" contenteditable="true">
            {{preDef.conditionals | json}}
        </div>
 </div>

tooltip-overview-example.component.ts 有表格，一旦用户点击工具提示中的按钮，数据就会传递给 alert-dialog.component.ts。

Stackblitz 链接https://stackblitz.com/edit/angular-mat-tooltip-rzstlk?file=app%2Ftooltip-overview-example.ts

Answer 1

首先，在左侧列表中，您必须设置mat-selection-list的选定值，将其绑定到您的模型： [(ngModel)]="incomingSelectedAlert" 。

然后在mat-list-options使用索引作为列表项的值： let i = index" [value]="i"并突出显示所选项目设置其类： [ngClass]="i==incomingSelectedAlert ? 'selected-option' : ''" [ngClass]="i==incomingSelectedAlert ? 'selected-option' : ''"

这样整个mat-selection-list看起来像这样：

<mat-selection-list #preDefAlertList [(ngModel)]="incomingSelectedAlert">
  <mat-list-option *ngFor="let preDef of data.data; let i = index" [value]="i" 
    [ngClass]="i==incomingSelectedAlert ? 'selected-option' : ''">
      {{preDef.Alert}}
    </mat-list-option>
</mat-selection-list>

在 CSS 文件中添加选定的选项样式：

.selected-option {
  background-color: yellow;
}

返回模板文件，只需更改右侧 JSON 数据的来源，使其始终显示所选项目的条件：

<div class="makeEditable" contenteditable="true">
  {{data.data[incomingSelectedAlert].conditionals | json}}
</div>

如您所见，您几乎拥有它。 我在这里对您的 Stackblitz 进行了分叉和更改： https ://stackblitz.com/edit/angular-mat-tooltip-pjq4ve。

更新

根据您的评论，我做了另一个 Stackblitz： https ://stackblitz.com/edit/angular-mat-tooltip-fhh3gr

mat-list-options值现在来自 items id 属性： <mat-list-option *ngFor="let preDef of data.data" [value]="preDef.id" 。

为了获得条件，它调用一个方法：

<div class="makeEditable" contenteditable="true">
    {{getSelectedConditionals() | json}}
</div>

在模型中：

getSelectedConditionals() {
   return this.data.data.find(x => x.id == this.incomingSelectedAlert).conditionals;
}