如何对角动态形式进行自动对焦

如何解决如何对角动态形式进行自动对焦

我有一个动态表单并在我的按钮上添加元素， 但我想重点关注新元素

//Html
<div class="container mt-2 describe">
          <div class="d-flex">
            <div class="btn btn-success radius-btn-add"
                 style="position: relative; "
                 (click)="addMission(i)"><span class="add">+</span></div>
          </div>

          <div class="row pb-5 " *ngFor="let mission  of exp.missions  let j = index">
            <div class="col-sm-12 col-md-8">
              <div class="d-flex flex-column ml-5">
                <div class="row" >
                  <textarea class="form-control" [(ngModel)]="mission.description" name="description_{{i}}_{{j}}"
                            placeholder="Description"  cols="20" rows="3"></textarea>
                </div>

// TS
  public addMission(i: number) {
    this.mission = new Mission();
    this.mission.id = null;
    this.mission.description = '';
    this.service.list_experience[i].missions.push(this.mission);
    this.service.list_experience[i].focus();;
  }

我正在寻找这样的手指

解决方法

您可以尝试根据索引为每个“任务”添加自定义 ID。

例如

<textarea class="form-control" [(ngModel)]="mission.description" name="description_{{i}}_{{j}}" placeholder="Description"  cols="20" rows="3" id="{{ 'missionNumber_' + j }}"></textarea>

然后您可以请求组件内的每个元素：

  public addMission(i: number) {
    this.mission = new Mission();
    this.mission.id = null;
    this.mission.description = '';
    this.service.list_experience[i].missions.push(this.mission);

    const lastMission = this.document.getElementById("#missionNumber_" + i);

    lastMission.focus();;
  }

,

//Html
<div class="container mt-2 describe">
          <div class="d-flex">
            <div class="btn btn-success radius-btn-add"
                 style="position: relative; "
                 (click)="addMission(i)"><span class="add">+</span></div>
          </div>
          <div class="row pb-5 " *ngFor="let mission  of exp.missions  let j = index">
            <div class="col-sm-12 col-md-8">
              <div class="d-flex flex-column ml-5">
                <div class="row" >
                  <textarea id="missionNumber_{{i}}_{{j}}" class="form-control" [(ngModel)]="mission.description" name="description_{{i}}_{{j}}"
                            placeholder="Description"  cols="20" rows="3"></textarea>
                </div>
// TS
  public addMission(i: number) {
    this.mission = new Mission();
    this.mission.id = null;
    this.mission.description = '';
    this.service.list_experience[i].missions.push(this.mission);
    this.service.list_experience[i].focus();
    onst j = this.cvService.list_experience[i].missions.length -1;
    setTimeout(()=>{ // this will make the execution after the above boolean has changed
      this.renderer2.selectRootElement('#missionNumber_'+i +'_'+ j).focus();
    },0);

在构造函数上添加renderer2

就是这样工作的。但如果你有最好的答案来代替超时，我会接受。