如何使用角度事件在文本字段中显示字符串的长度。？答案

【问题标题】：How to display the length of string in textfield using events in angular.?如何使用角度事件在文本字段中显示字符串的长度。？
【发布时间】：2019-02-25 05:57:11
【问题描述】：

我正在执行一项任务，我需要显示使用事件输入到文本字段中的字符串的长度。另一个附加条件是，如果字符串长度大于 4，那么只有它会显示使用 ngIf 应该达到的长度。

到目前为止我所做的工作在 HTML 中

<div class="container">
    <input type="text" placeholder="Default Message" 
    [(ngModel)]="tname"
    (tname)="event('tname')">
    {{s}}
</div>

在 .ts 中

tname:string;
k:number;
event(s:string){
this.k = s.length ;
 console.log(s);
}

【问题讨论】：

你也可以在没有事件和ngIf {{ (tname && tname.length > 4) ? tname.length : '' }}的情况下实现同样的效果
我需要使用这个，它是强制性的

标签： angular events angular-ng-if

【解决方案1】：

HTML

<div class="container">
  <input type="text" (keyup)="onKeyUp($event)" /> <strong>Result- {{value}}</strong>
  <p></p>
</div>

TS 文件

  value;
  onKeyUp(e) {
    this.value = e.target.value.length;
  }

【讨论】：

【解决方案2】：

您已经使用双向绑定的ngModel 指令绑定了tname。所以只需tname.length 就能解决您的问题。

这里是解决方案

HTML

<div class="container">
    <input type="text" placeholder="Default Message" 
    [(ngModel)]="tname"
    (tname)="event('tname')">
    {{s}}
 <span *ngIf="this.k > 4"> Length is {{this.k}}></span>
</div>

event(s:string){
  this.k = this.tname.length ;
    console.log(this.k); // displaying  length
}

希望对您有所帮助！

【讨论】：

请检查更新的答案。你得到什么错误？
它没有显示任何错误。它只是没有显示长度。
这样做的条件是我需要添加一个调用事件函数的提交按钮。
如果我需要添加背景颜色，如果长度小于 4 则为红色？？
使用 ngClass 或 ngStyle 根据条件应用样式。这是链接codecraft.tv/courses/angular/built-in-directives/…

【解决方案3】：

我希望这是你所期待的 example

【讨论】：

它确实奏效了！但是可以不使用 changeEvent 和 ngModelchange 来完成。因为我的课程还没有涉及这些主题。
模型中的更改可以通过 ngModelChange 和更改事件轻松检测。
是的，但该主题仍有待我学习..sp 只需要使用 ngIf 和 events 显示长度的基本方法
如果字符串长度小于4，我需要添加背景色怎么办？？
我想要文本域——我们输入字符串的地方——如果长度小于 4 来改变颜色

【解决方案4】：

这是我得到的最终答案.. 在 HTML 中

<div class="container">Name:<br>
<input type="text" placeholder="Default Message" 
[(ngModel)]="tname"
(change)="event('change')"><br>
<span *ngIf="this.k >=4"> Length={{k}}</span>
</div>

输入.ts

 tname:string='';
 k:number=0;
 event(s:string){
 this.k = this.tname.length ;
 console.log(this.k);
}

【讨论】：