Angular материал, чтобы выбрать опцию mat-list-option и показать соответствующие данные выбранной опции mat-list-option - PullRequest
Новая
       44

Angular материал, чтобы выбрать опцию mat-list-option и показать соответствующие данные выбранной опции mat-list-option

1 голос
/ 18 марта 2020

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

При нажатии кнопки открывается angular mat-диалог, который имеет данные первого столбца в левой части диалогового окна mat.

Мне нужно добиться 2 вещей

1) В левой части диалогового окна mat-list-option выбирается по умолчанию в зависимости от того, на какую строку пользователь наводил курсор и нажимал на кнопку всплывающей подсказки.

2) В правой части диалогового окна циновки должны быть указаны «условия», «смещение», «предупреждение». "данные свойств, относящиеся к параметру mat-list-option, выбраны с левой стороны.

Например: в таблице пользователь зависал на данных за 1 мин ( под столбцом предупреждений ) и нажимает кнопку как только всплывающая подсказка откроется, в диалоговом окне mat должна быть выбрана 1-минутная строка данных, а справа должны быть загружены соответствующие данные «conditionals», «offset», «alert», соответственно, в зависимости от выбранной опции mat-list-option его почтение Должны загружаться ctive «условные» данные.

Я уже ввел в действие только одну опцию mat-list-option за один раз

alert-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 содержит таблицу, и данные передаются в alert-dialog.component.ts, как только пользователь нажимает кнопку, присутствующую в подсказке.

Stackblitz link https://stackblitz.com/edit/angular-mat-tooltip-rzstlk?file=app%2Ftooltip-overview-example.ts

1 Ответ

1 голос
/ 19 марта 2020

Сначала в левом списке необходимо установить выбранное значение mat-selection-list, связывающее его с вашей моделью: [(ngModel)]="incomingSelectedAlert".

Затем в mat-list-options используйте индекс в качестве значение для элемента списка: let i = index" [value]="i" и выделите выбранный элемент, установив его класс: [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;
}
...