角材料，選擇 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;
}