Сфокусировать заданный элемент c mat-option при открытии диалога выбора mat? - PullRequest
Новая
       21

Сфокусировать заданный элемент c mat-option при открытии диалога выбора mat?

0 голосов
/ 29 апреля 2020

Я хочу сфокусироваться на опции (выделите опцию) автоматически при открытии выбора мата. Я думал, что с небольшим количеством поиска это будет решено легко, но я не мог найти ответ solid нигде.

Вот выбор циновки, который я использую. 

             <mat-select required name="AngabeId" [(ngModel)]="bedingungszielList[0]?.BedingungenList[i].AngabeId">
                <ng-container *ngFor="let antragsbereich of antragsBereichListWithAngabelist">
                  <mat-optgroup *ngIf="antragsbereich.AngabeList.length > 0" [label]="antragsbereich.Bezeichnung" class="bedigungOptGroup">
                    <ng-container *ngFor="let angabe of antragsbereich.AngabeList">
                      <mat-option *ngIf="angabe.Id !== Id" [value]="angabe.Id" class="bedigungOptions">
                        {{ angabe.Fragetext }}
                      </mat-option>
                    </ng-container>
                  </mat-optgroup>
                </ng-container>
              </mat-select>

А вот пример кода того, чего я хочу достичь, angabe.Id - опция циновки ngmodel. 

  this.antragsBereichListWithAngabelist.forEach(element => {
    element.AngabeList.forEach(angabe => {
       if(angabe.Id===962)
         angabe.Id.focus(); // mat-option focus, my intention, sample code(bad)
    });
  });

Вот пример с изображением: Матовая опция фокусировки

Ответы [ 2 ]

0 голосов
/ 30 апреля 2020

Для тех, у кого может быть такая же проблема, в сочетании с Марути Эранки, ответьте, что я придумал .. 

  selectOpened() {
  document.querySelectorAll('.bedigungOptGroup').forEach(item=>{
  if(item.getAttribute("antragsId") === 
  this.antragsBereichValueSelected.toString()) 
     item.scrollIntoView(true);
  });
}
0 голосов
/ 30 апреля 2020

Если я понимаю вашу проблему, вы хотели сфокусировать опцию, когда открываете поле выбора. Итак, я бы предложил вам использовать (открытое) событие в mat-select. Это то, что я пробовал:

. html 

<mat-form-field>
  <mat-label>Cars</mat-label>
  <mat-select [(ngModel)]="default" required (opened)="selectOpened()">
    <mat-option value="volvo">Volvo</mat-option>
    <mat-option value="saab">Saab</mat-option>
    <mat-option value="mercedes">Mercedes</mat-option>
    <mat-option value="audi">Audi</mat-option>
  </mat-select>
</mat-form-field>

.ts 

default = '';

selectOpened() {
    this.default = 'audi';
}

Этот код будет фокусировать ауди опцию, когда открывается окно выбора. Надеюсь, это полезно для вас.

...