时间戳

首页 > 解决方案 > 标签 mat-ltab 中 Ngfor 的使用

angular - 标签 mat-ltab 中 Ngfor 的使用

问题描述

我在使用（包括角材料）时遇到*ngFor问题mat-tab。我有一个按钮，单击该按钮时会使用*ngFor. 我在这段代码中的 textArea 有一个id = serReal{{j}}where j 是*ngFor. 我的参考虽然不起作用。当我试图在我的打字稿代码中获取元素时，它只得到第一个（serReal0）。对于其他人，我收到 null。

我的 HTML 代码：

    <!-- here I call it to duplicate -->
    <button mat-icon-button (click)="addData()" type="button" id="add_icon"></button>

    <!-- here it is my ngfor code which will duplicate -->
    <mat-tab-group>
          <mat-tab *ngFor="let itemServ of itemsServ; let j = index;" [label] = label[j]>
                <div class="areaTexto">
                      <div class="mdc-text-field text-field mdc-text-field--fullwidth mdc-text-field--textarea">
                            <textarea class="campoTextoServReal" 
id ="servReal{{j}}"></textarea>
                      </div>
                </div>
          </mat-tab>
    </mat-tab-group>

    <!-- here I call it to read the text areas by the id -->
    <div class="divEncerraRel" id = apply>
          <button mat-raised-button (click) = 'setRelatorio()'>Encerrar Relatório</button>
    </div>

我的 TS 代码：

    itemsServ: number[] = [1];

addData() { 
  this.itemsServ.push(this.itemsServ.length + 1);
  this.label.push('Titulo');
}  

setRelatorio() {
  for (let i = 0; i < this.itemsServ.length; i++) {
     console.log((<HTMLInputElement>document.getElementById("servReal" + i)));
  } 
}

标签： angular

解决方案

我认为您的部分问题是您如何在 html 中设置您的 id。代替

<textarea class="campoTextoServReal" [id]="servReal{{j}}"></textarea>

尝试

<textarea class="campoTextoServReal" id="{{'servReal' + j }}"></textarea>

此外，当您期望<textarea id="servRealj">（其中 j 是预期的索引）时得到空值的原因是因为它是一个选项卡组。当您在选项卡之间移动时，Angular 会mat-tab-body从 DOM 中删除 ，因此当您通过元素 id 搜索它们时，它们不存在。您可以看到这一点，因为当您转到选项卡 1 或选项卡 2 时，您只会看到 servReal1 和 servReal2。

推荐阅读