Question

我正在尝试创建可编辑的单元格

  <ng-template pCellDef [column]="field.property" let-row="row" let-inEdit="false">
    <div style="height: 50px; width: 100%" (click)="inEdit=true" (blur)="inEdit=false">
    <div *ngIf="!inEdit">
      {{row[field.property]}}
    </div>
    <mat-form-field *ngIf="inEdit" class="example-full-width">
      <input matInput [(ngModel)]="row[field.property]">
    </mat-form-field>
    </div>
  </ng-template>

效果很好，我要做的最后一件事是对输入设置 focus ，以便用户输入。

因此，有一种方法可以不排除组件输入？

类似(onShow)="this.focus()"的东西吗？

Answer 1

尝试自动对焦：

<mat-form-field *ngIf="inEdit" class="example-full-width">
  <input matInput [(ngModel)]="row[field.property]" autofocus>
</mat-form-field>

Answer 2

您可以使用ElementRef这是示例

HTML

 <ng-template pCellDef [column]="field.property" let-row="row" let-inEdit="false">
    <div style="height: 50px; width: 100%" (click)="inEdit=true" (blur)="inEdit=false">
    <div *ngIf="!inEdit">
      {{row[field.property]}}
    </div>
    <mat-form-field *ngIf="inEdit" class="example-full-width">
      <input matInput [(ngModel)]="row[field.property]" #inputRef>
    </mat-form-field>
    </div>
  </ng-template>

TS

@ViewChild('inputRef') inputRefData : ElementRef

customFocus() {
  this.inputRefData.nativeElement.focus();
}

如何将焦点放在show上，如果ngIf bind更改为true？

2 个答案: