Question

我在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)


  }

}

Answer 1

<强> 1。检查无效：

实际上问题是您没有使用清空新行进行检查。如果按回车键，则会在textarea中生成一个新行，但它与您的条件不匹配。

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

在 if 条件下，不会检查空的新行。这就是为什么它会转向其他情况。

试试吧，

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

首次按键，您可以看到顺序。但我强烈建议你不要使用上述条件。这只是为了您的理解。

2.console.log根本不打印

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

Answer 2

使用它会照顾所有条件

 if( this.comment  ) {
    }

如果值不是，
将评估为true：

null
undefined
NaN
空字符串（＆＃34;＆＃34;）
0
false

Angular 4 keyup.enter无法正常工作

2 个答案: