javascript - 获取 *ngFor 中的文本长度

Question

我是 Angular (8) 的新手，我尝试获取输入值的长度，这是我在 *ngFor 中创建的，如下所示:

<div *ngFor="let panel of panels; index as i" class="panel" [id]="'panel-' + panel.id">
    <div>{{ panel.title }}</div>
    <input matInput placeholder="Bezeichnung" [(ngModel)]="panel.title" />
</div>

我如何在类里面访问 panel.title 的长度？

这是我的接口(interface)/类

export interface ProgressbarStepData {
    // Each progressbar step is represented by an instance of this data type.
    id: number; // Unique ID
    title: string; // The label that is displayed as the step title.
    color: string; // Hex code of the colored markings associated with this step. Only visible in Builder, not Viewer.
    order: number; // Denotes which step this is (from step 1 to <number of steps>)
}

export class ProgressbarEditorComponent implements OnInit {
    public panels: Array<ProgressbarStepData> = []; // One panel for each existing progressbar step

   ...

我需要什么来获取当前输入的输入的长度？

编辑

阐明我想要实现的目标:我想计算在 CURRENT 输入中键入的字符数并从类(而不是模板本身)触发警报

Answer 1

您的 ngModel 需要绑定(bind)到 panels 而不是 ngFor 中的 panel。您可以使用 index 执行此操作。

<div *ngFor="let panel of panels; index as i" class="panel" [id]="'panel-' + panel.id">
    <div>{{ panel.title }}</div>
    <input matInput placeholder="Bezeichnung" [(ngModel)]="panels[i].title" (blur)="showAlert(i)" />
</div>

然后通过传入索引触发组件中的警报，并使用它来获取面板标题的长度。我在这里使用了 blur 事件。

showAlert(index) {
    const titleLength = this.panels[index].title.length;
    // Call alert with the length of the title here.
}