To highlight the selected row in mat-selection list and show its corresponding data by default

问题

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

回答1:

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

回答2:

try to use (selected) as input in mat-selection-list tag and then pass the parameter in the selectionChange Methode

回答3:

If you want "mark as selected" a row, you can has a variable

   selected:number=-1;

when you defined the mat-row, you add let i=index and you can change the style.background if i==selected, e.g.

 <tr mat-row *matRowDef="let row; let i=index columns: displayedColumns;" [style.background-color]="i==selected?'red':null"></tr>

The last step if give value to the variable selected. For this, in a td, you can pass the row (futhermore the element)

<td mat-cell *matCellDef="let element;let i=index" 
     (click)="selected=i"> 
     {{element.position}} 
</td>

in this stackblitz if you "click" on "position", you see the row "selected".

In your case just in button you can add selected=i

  <button (click)="selected=i;
     onClick($event,(this.paginator.pageIndex == 0 ?  i : 
       i + this.paginator.pageIndex * this.paginator.pageSize))">
     Click
  </button>

Don't forget if you want "des-select" equal the variable to -1

dialogRef.afterClosed().subscribe(result => {
  this.selected=-1;
});

来源：https://stackoverflow.com/questions/60811034/to-highlight-the-selected-row-in-mat-selection-list-and-show-its-corresponding-d