Блог

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

Я могу заставить всплывающее диалоговое окно заполниться правильными данными, но когда я перехожу к редактированию полей, у меня возникает странное поведение.

Если я попытаюсь поместить курсор в что-либо, кроме верхнего поля, курсор будет продолжать перемещаться в верхнее поле ввода.
Если я выделю раздел одного из других полей ввода, я смогу отредактировать это поле, но затем курсор снова переместится в верхнее поле. Вставка вкладок между полями работает так же нормально, как и выделение всего поля

Почему курсор вставки перемещается обратно наверх. Что происходит?

диалоговое окно.компонент.ts

 import { Component, Inject, Optional } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';  export interface UsersData {  name: string;  id: number;  address: string;  email: string;  phoneNumber: string;  dateOfBirth: string }   @Component({  selector: 'app-dialog-box',  templateUrl: './dialog-box.component.html',  styleUrls: ['./dialog-box.component.scss'] }) export class DialogBoxComponent {   action: string;  local_data: any;   constructor(  public dialogRef: MatDialogReflt;DialogBoxComponentgt;,  @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {  console.log(data);  this.local_data = { ...data };  this.action = this.local_data.action;  }   doAction() {  this.dialogRef.close({ event: this.action, data: this.local_data });  }   closeDialog() {  this.dialogRef.close({ event: 'Cancel' });  }  }  

dialog-box.component.html

 lt;h1 mat-dialog-titlegt;lt;stronggt;{{action}}lt;/stronggt;lt;/h1gt; lt;div mat-dialog-contentgt;  lt;mat-form-field *ngIf="action != 'Delete'; else elseTemplate"gt;    lt;input matInput [(ngModel)]="local_data.name"gt;  lt;input matInput [(ngModel)]="local_data.address"gt;  lt;input matInput [(ngModel)]="local_data.email"gt;  lt;input matInput [(ngModel)]="local_data.phoneNumber"gt;  lt;input matInput [(ngModel)]="local_data.dateOfBirth"gt;  lt;/mat-form-fieldgt;  lt;ng-template #elseTemplategt;  Really delete lt;bgt;{{local_data.name}}lt;/bgt;?  lt;/ng-templategt; lt;/divgt; lt;div mat-dialog-actionsgt;  lt;button mat-button (click)="doAction()"gt;{{action}}lt;/buttongt;  lt;button mat-button (click)="closeDialog()" mat-flat-button color="warn"gt;Cancellt;/buttongt; lt;/divgt;