获取 *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>

如何访问 class 中 panel.title 的长度？

这是我的interface/class

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 输入中键入的字符数并从 class（而不是从模板本身）触发警报

Answer 1

.html

<input type="text" (input)="inputMthd($event)"  (keyup)="methodCalled($event)">

.ts

inputMthd(e){
console.log(e);
event.target.value.length;
}
methodCalled(e){
console.log(e);
e.target.value.length;
}

Answer 2

试试这个，

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


onChange(title) {
          console.log(title.length);
         })

Answer 3

您的 ngModel 需要绑定到 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.
}

获取 *ngFor 中的文本长度

Get length of text in *ngFor

javascript

typescript

angular

angular-reactive-forms

angular8

.html

.ts