Для выделения выделенной строки в списке выбора матов и отображения соответствующих данных по умолчанию

Question

Когда мы наводим курсор на первый столбец таблицы, появляется всплывающая подсказка, а затем при щелчке по нажатию кнопки в диалоговом окне циновки всплывающей подсказки.

Данные загружаются, но в первый раз, когда открывается диалоговое окно строка по умолчанию не выбрана.

Примечание: (после открытия диалогового окна при выборе любой строки загружаются соответствующие ей данные, и строка выделяется, поэтому эта часть работает, но по умолчанию подсветка левой строки раздела не работает, когда всплывающее окно открывается в первый раз)

Диалог содержит 2 оставшихся раздела и Edit json и. В левой части выбранной строки отображаются соответствующие данные с правой стороны в виде json.

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")
    }
 }
}

ссылка на стек *

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

Эта ссылка ниже является более старой версией до того, как я внес изменения, когда данные загружались в диалоговом окне и строка выделялась

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

Answer 1

Что я могу быстро предложить вам, так это добавить хук жизненного цикла ngAfterViewInit и отметить первую опцию как выбранную.

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

РЕДАКТИРОВАТЬ - согласно вашему комментарию

Пожалуйста, посмотрите на это пример. Теперь я выбираю элемент, по которому щелкнули, и отображаю его детали на правой стороне. https://stackblitz.com/edit/angular-mat-tooltip-ki4r2q?file=app / предупреждение-диалог / предупреждение-dialog.component.ts

Answer 2

Если вы хотите «пометить как выбранную» строку, вы можете иметь переменную

   selected:number=-1;

, когда вы определили строку mat, добавьте let i = index и вы можете изменить style.background если i == выбрано, например

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

Последний шаг, если присвоить значение выбранной переменной. Для этого, в тд, вы можете передать строку (далее элемент)

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

в этот стек , если вы "нажмете" на "позиции", вы увидите строку " selected ".

В вашем случае просто в кнопку вы можете добавить selected=i

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

Не забудьте, если вы хотите, чтобы" des-select "равнялся переменной -1

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

Answer 3

попытаться использовать (выбранный) в качестве ввода в теге mat-selection-list, а затем передать параметр в метод selectionChange