Angular 4 keyup.enter 无法正常工作答案

【问题标题】：Angular 4 keyup.enter not working properlyAngular 4 keyup.enter 无法正常工作
【发布时间】：2018-04-06 05:49:40
【问题描述】：

我在 keyup.enter 上触发 addComment 函数并单击事件。我已经在 addComment 函数中应用了 if 条件，如果 ngModel 值注释趋于为空或未定义，那么我会警告一个错误。但是，如果我为 keyup.enter 编写代码，那么我的验证将停止工作。 console.log 根本不打印任何内容，并且检查不起作用。这发生在 keyup.enter 而不是 click 事件。请提出一些修复建议。

HTML

<div class="row">
<div style="margin-left: 30px; margin-top: 1%;" class="col-lg-6 col-sm-12">

    <textarea style="border-radius: 20px;display:inline!important;" (keyup.enter)="addComment($event)" [(ngModel)]="comment" class="form-control" placeholder="Add Comment">

    </textarea>
  <button (click)="addComment($event)" style="display:inline-block;margin-top: 2%" class="btn-success">Add Comment</button>
</div>
</div>

组件

import {Component, OnInit, ElementRef, ViewChild, Renderer2} from '@angular/core';
import { CommentsDataService} from "../../services/comments/comments-data.service";

@Component({
  selector: 'app-list-comments',
  templateUrl: './list-comments.component.html',
  styleUrls: ['./list-comments.component.css']
})
export class ListCommentsComponent implements OnInit {
  commentsData; // Json array of Comment Data received from service.
  comment:string; // Commennt text; declaration.
  postId = 1;
  getComments;  // Declaration of function.




  @ViewChild('commentData.id') commentDataId;  // id of reply textarea


  /**
   * Append new comment
   * @param comment
   */
  addComment(comment)
  {
    console.log("comment text:"+this.comment);
    if(typeof this.comment == "undefined" || this.comment === '' || this.comment == null)
    {
      alert("Add some text!");
      return false;
    }
    else
    {

      this.commentsData.push({

        root_id:"2",
        target_id: "12",
        text: this.comment,
        comment_posted_by:"Jack",
        comment_posted_by_image:'../../assets/images/no-user.png'
      })
    }



  }

  addReply();
  addReply()
  {
    var textarea = this.commentDataId.nativeElement;

    alert(this.commentDataId);



  }

  constructor(private commentsDataService:CommentsDataService, private renderer: Renderer2 ) {





  }



  ngOnInit() {

    this.commentsData = this.commentsDataService.getComments(this.postId);
     console.log( this.commentsData)


  }

}

【问题讨论】：

标签： angular angular4-forms

【解决方案1】：

1.检查不起作用：

实际上问题在于您没有检查 empty new line。如果您按回车键，文本区域中会生成一个新行，它将与您的条件不匹配。

if(typeof this.comment == "undefined" || this.comment === '' || this.comment == null){ }

在您的 if 条件下，不会检查空的新行。这就是为什么它会转到 else 案例。

试试这个，

if(typeof this.comment == "undefined" || this.comment === '' || this.comment == null || this.comment == '\n'){  }

第一次回车键可以看到顺从。但我强烈建议您不要使用上述条件。这只是为了您的理解。

2.console.log 什么也不打印

对于新行，我们在控制台或警报消息中看不到任何内容。

【讨论】：

【解决方案2】：

使用它会处理所有条件

 if( this.comment  ) {
    }

如果值不是，则评估为真：

null
undefined
NaN
空字符串 ("")
0
false

【讨论】：