角材料，选择垫列表选项并显示所选垫列表选项的相应数据

Question

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

单击该按钮，将打开角度垫对话框，该对话框的第一列数据位于垫对话框的左侧。

我需要实现两件事

1]在mat-dialog的左侧，默认情况下应根据用户悬停并单击其工具提示按钮的行来选择mat-list-option。

2）垫对话框的右侧需要填充与在左侧选择的垫列表选项相关的“条件”，“偏移”，“警报”属性数据。

例如：在表中，用户将鼠标悬停在1分钟数据上（在警报栏下），一旦工具提示打开，单击按钮，则应在Mat-dialog 1分钟数据行中选择它，在右侧相应的“ conditional”，“ offset”，“ alert”数据应加载，因此，根据所选的mat-list-option，相应的“ conditional”数据应加载。

我已经一次只可以选择一个mat-list-option了

alert-dialog.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' : ''"

这样整个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值现在来自项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;
}