小编Set*_*eth的帖子

我有一个使用MatInputAngular Material的模板。我试图从代码中访问这个组件，@ViewChild以便我可以以编程方式改变focused状态，但是MatInput当视图初始化时它不存在 - 它的存在是由*ngIf指令确定的。基本上，当视图加载时，有一个p带有一些文本的元素。如果用户单击该元素，它将被替换input为起始值是原始元素文本的 。当它失去焦点时，它会被保存并恢复为一个p元素。问题是当他们第一次单击文本进行更改时，input创建的文本没有焦点 - 他们必须再次单击它才能开始编辑。我希望他们能够单击一次并开始输入。

这是我的相关代码。

模板：

<mat-form-field *ngIf="selected; else staticText" class="full-width">
  <input matInput type="text" [(ngModel)]="text" (blur)="save()">
</mat-form-field>
<ng-template #staticText>
  <p class="selectable" (click)="select()">{{ text }}</p>
</ng-template>

打字稿：

import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { MatInput } from '@angular/material';
import { AfterViewInit } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
  selector: 'app-click-to-input',
  templateUrl: './click-to-input.component.html',
  styleUrls: ['./click-to-input.component.scss']
})
export class ClickToInputComponent …