在 mat-selection 列表中突出显示选定的行并默认显示其对应的数据 [英] To highlight the selected row in mat-selection list and show its corresponding data by default

问题描述

当我们将鼠标悬停在表格的第一列上时，会出现一个工具提示，然后点击工具提示垫对话框中的按钮就会打开.

数据加载但第一次打开对话框时默认情况下不选择行.

注意:(在对话框打开后选择任何行，其相应的数据加载并且该行被高亮显示，因此这部分有效，但左侧部分行的默认突出显示在以下情况下不起作用弹出窗口第一次打开)

该对话框包含 2 个部分左侧和编辑 json 和.左边选择哪一行，右边对应的数据显示为json.

alert-dialog.component.html

<div class="col-6 d-flex flex-column"><span class="sub-section p-t-26 p-b-10">预定义警报</span><div class="alert-select"><mat-selection-list #preDefAlertList (selectionChange)="selectionChanged($event)"><mat-list-option #option *ngFor="let preDef of data.data; let i = index" [value]="i" [ngClass]="option.selected ? 'selected-option' : ''">{{preDef.alert}}</mat-list-option></mat-selection-list>
<span class="sub-section p-t-10 p-b-10">自定义警报</span><div class="alert-select">逻辑推理

alert-dialog.component.ts

导出类 AlertDialogComponent {@ViewChild(MatSelectionList) preDefAlertList: MatSelectionList;jsonform:表单组；构造函数(公共 dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) 公共数据:DialogData，私有alertService:AlertService，私人FB:FormBuilder){控制台日志(数据)；this.jsonform = this.fb.group({json: [data['data'][0].conditionals]});}ngOnInit(){this.jsonform.statusChanges.subscribe(() => {if(!this.jsonform.valid && this.jsonform.dirty){console.log("表单脏且无效")}别的{console.log("表单脏但有效")}});this.preDefAlertList.selectionChange.subscribe((s: MatSelectionListChange) => {this.preDefAlertList.deselectAll();s.option.selected = true;});}selectionChanged(事件:MatSelectionListChange){this.jsonform.setValue({json: this.data['data'][event.option.value].conditionals});}onAddNewAlert(){if(!this.jsonform.valid && this.jsonform.dirty){console.log("最终验证")}}}

stackblitz 链接

https://stackblitz.com/edit/angular-mat-tooltip-uwsbqa?file=app/alert-dialog/alert-dialog.component.html

下面的链接是旧版本，之前我在 mat 对话框中加载数据并且行被突出显示

https://stackblitz.com/edit/angular-mat-tooltip-qxxgcp?file=app%2Falert-dialog%2Falert-dialog.component.html

解决方案

我可以快速向您建议的是添加 ngAfterViewInit 生命周期钩子，并在此处将第一个选项标记为已选中.

ngAfterViewInit() {this.preDefAlertList.options.first.selected = true;}

编辑 - 根据您的评论

请看这个例子.现在我预选被单击的元素并在右侧显示其详细信息.https://stackblitz.com/edit/angular-mat-tooltip-ki4r2q?file=app/alert-dialog/alert-dialog.component.ts

When we hover over the first column of the table a tooltip appears and then on clikcing on the button presnt in the tooltip mat dialog opens up.

The data loads but for the first time when the dialog opens up the row is not selected by default.

Note: (after the dialog has opened then on selecting any row its corresponding data loads and the row gets higlighted ,so this part works, but default highlighting of the left section row does not work when the popup opens for the first time)

The dialog contains 2 sections left and Edit json and. In the left whichever row is selected its corresponding data on the right side as json is shown.

alert-dialog.component.html

<div class="row align-items-center">
    <div class="col-6 d-flex flex-column">
        <span class="sub-section p-t-26 p-b-10">Predefined Alerts</span>
        <div class="alert-select">
            <mat-selection-list #preDefAlertList (selectionChange)="selectionChanged($event)">
                <mat-list-option #option *ngFor="let preDef of data.data; let i = index" [value]="i" [ngClass]="option.selected ? 'selected-option' : ''">
                  {{preDef.alert}}
                </mat-list-option>
            </mat-selection-list>
        </div>
        <span class="sub-section p-t-10 p-b-10">Custom Alerts</span>
        <div class="alert-select">
            Lorem ipsum
        </div>
    </div>
</div>

alert-dialog.component.ts

export class AlertDialogComponent {

@ViewChild(MatSelectionList) preDefAlertList: MatSelectionList;
jsonform: FormGroup;

constructor( public dialogRef: MatDialogRef<AlertDialogComponent>,
             @Inject(MAT_DIALOG_DATA) public data: DialogData, private alertService: AlertService,
             private fb: FormBuilder) {
        console.log(data);
        this.jsonform = this.fb.group({
            json: [data['data'][0].conditionals]
          });      
}

ngOnInit(){
    this.jsonform.statusChanges.subscribe(() => {
        if(!this.jsonform.valid && this.jsonform.dirty){
            console.log("form is dirty and not valid")
        }else{
            console.log("form is dirty but valid")
        }
      });

    this.preDefAlertList.selectionChange.subscribe((s: MatSelectionListChange) => {
        this.preDefAlertList.deselectAll();
        s.option.selected = true;
    });
}

selectionChanged(event: MatSelectionListChange) {
    this.jsonform.setValue({
      json: this.data['data'][event.option.value].conditionals
    });
  }

onAddNewAlert(){
    if(!this.jsonform.valid && this.jsonform.dirty){
        console.log("final validation")
    }
 }
}

stackblitz link

https://stackblitz.com/edit/angular-mat-tooltip-uwsbqa?file=app/alert-dialog/alert-dialog.component.html

This below link is the older version before I did the changes where data was loading in mat dialog and the row was getting highlighted

https://stackblitz.com/edit/angular-mat-tooltip-qxxgcp?file=app%2Falert-dialog%2Falert-dialog.component.html

解决方案

What I quickly can propose to you is to add ngAfterViewInit lifecycle hook and here mark the first option as selected.

ngAfterViewInit() {
    this.preDefAlertList.options.first.selected = true;
  }

EDIT - according to your comment

Please look at this example. Now I preselect element which was clicked and display its details on the right side. https://stackblitz.com/edit/angular-mat-tooltip-ki4r2q?file=app/alert-dialog/alert-dialog.component.ts

这篇关于在 mat-selection 列表中突出显示选定的行并默认显示其对应的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！