Angular material , to select mat-list-option 并显示 selected mat-list-option 的相应数据
Angular material , to select mat-list-option and show the respective data of the selected mat-list-option
当用户将鼠标悬停在 table 的第一列上时,会出现一个工具提示,底部有一个按钮。
单击按钮后,angular mat-dialog 打开,其中第一列数据位于 mat-dialog 的左侧。
我需要完成两件事
1) 在 mat-dialog 的左侧,默认情况下应选择 mat-list-option,具体取决于用户悬停在哪一行并单击其工具提示按钮。
2) mat-dialog右侧需要填充"conditionals","offset","alert" 属性 mat-list相关的数据-在左侧选择的选项。
例如:在 table 中,用户将鼠标悬停在 1 分钟的数据上( 在警报列下 ),并在工具提示打开后单击按钮,在 mat-dialog 中应选择 1 分钟数据行,并在右侧加载其各自的 "conditionals"、"offset"、"alert" 数据,因此相应地取决于所选的 mat-list-option 其各自的 "conditionals" 数据应该加载。
我已经强制一次只能选择一个 mat-list-option
警报-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 有 table,一旦用户点击工具提示中的按钮,数据就会被传递到 alert-dialog.component.ts。
Stackblitz link
https://stackblitz.com/edit/angular-mat-tooltip-rzstlk?file=app%2Ftooltip-overview-example.ts
首先,在左侧列表中,您必须设置 mat-selection-list
的选定值并将其绑定到您的模型:[(ngModel)]="incomingSelectedAlert"
.
然后在 mat-list-options
中使用索引作为列表项的值:let i = index" [value]="i"
并突出显示所选项目设置其 class:[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;
}
当用户将鼠标悬停在 table 的第一列上时,会出现一个工具提示,底部有一个按钮。
单击按钮后,angular mat-dialog 打开,其中第一列数据位于 mat-dialog 的左侧。
我需要完成两件事
1) 在 mat-dialog 的左侧,默认情况下应选择 mat-list-option,具体取决于用户悬停在哪一行并单击其工具提示按钮。
2) mat-dialog右侧需要填充"conditionals","offset","alert" 属性 mat-list相关的数据-在左侧选择的选项。
例如:在 table 中,用户将鼠标悬停在 1 分钟的数据上( 在警报列下 ),并在工具提示打开后单击按钮,在 mat-dialog 中应选择 1 分钟数据行,并在右侧加载其各自的 "conditionals"、"offset"、"alert" 数据,因此相应地取决于所选的 mat-list-option 其各自的 "conditionals" 数据应该加载。
我已经强制一次只能选择一个 mat-list-option
警报-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 有 table,一旦用户点击工具提示中的按钮,数据就会被传递到 alert-dialog.component.ts。
Stackblitz link https://stackblitz.com/edit/angular-mat-tooltip-rzstlk?file=app%2Ftooltip-overview-example.ts
首先,在左侧列表中,您必须设置 mat-selection-list
的选定值并将其绑定到您的模型:[(ngModel)]="incomingSelectedAlert"
.
然后在 mat-list-options
中使用索引作为列表项的值:let i = index" [value]="i"
并突出显示所选项目设置其 class:[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;
}