模态文本返回未定义

时间:2019-03-07 10:53:54

标签: javascript angular twitter-bootstrap bootstrap-modal

所以,我已经研究了很长时间了。我有一个带有textarea的模态。我想发生的是,当有人单击“发布”时,我想查看他们发布的内容。目前,它返回的是不确定的,我不明白为什么。这是代码:

test.component.html

<form>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Confess.</label>
    <textarea class="form-control" id="textarea" rows="3"></textarea>
  </div>
  <button type="button" (click)="submitPost()" class="btn btn-primary postMssg">
    Post
  </button>
</form>    
<div *ngFor="let data of datasource; let i = index">
  {{ data.post }}
  <button
    type="submit"
    data-toggle="modal"
    [attr.data-target]="'#' + data.key"
    (click)="check('#' + data.key)"
  >
    Reply
  </button>
  <div
    class="modal fade"
    [attr.id]="data.key"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="commentText">Example textarea</label>
              <textarea
                class="form-control data.key"
                id="commentText"
                rows="3"
              ></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            Close
          </button>
          <button
            type="button"
            (click)="addComment(data.key)"
            class="btn btn-primary"
          >
            Post
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

test.component.ts

 addComment(key) {
    let res = "." + key;
    let complete = $("." + key).val();
    console.log(complete);
  }    
  check(key) {
    console.log(key);
  }


submitPost() {
    // console.log(this.idCount);
    let post = $("#textarea").val();

    if (post !== "") {
      // this.posts = [];
      let item = this.db.list("/test").push({
        post: post,
        name: localStorage.getItem("name"),
        likes: 0,
        id: this.idCount + 1,
        likeBtn: 0,
        fireBtn: 0,
        time: moment().format("llll")
      });

      this.db.database
        .ref("/test")
        .child(item.key)
        .update({ key: item.key });

      this.datasource.push({
        post: post,
        name: localStorage.getItem("name")
      });
    }

    let result = this.db
      .list("/testID")
      .valueChanges()
      .subscribe(val => {
        val.forEach((value: any) => {
          this.db.database
            .ref("/testID")
            .child("1")
            .child("idCount")
            .transaction(count => {
              return count + 1;
            });

          this.unsubscribe(result);
        });
      });

    $("#textarea").val("");
  }

请随时将我引到一篇帖子或文章上,如果您不愿意给您2美分的话,可能会有所帮助。我读了很多SO帖子,没有什么比我正在处理的要好。我之前已经做过,我不记得很难将其组合在一起。任何人,我都想为我创建的网站的帖子添加评论部分。当您看不到数据时,很难创建注释部分。

我认为这是我的类名存在的问题,但是它们都是唯一的,并且在我尝试使用console时正在填充。请在addComment部分中记录它们

1 个答案:

答案 0 :(得分:-1)

textArea尚未分配模型。在文本区域中使用ngModel,然后将该模型传递给您关闭模态的标签。

添加:

  <ion-textarea placeholder="Comienza a dictar" [(ngModel)]="data" name="title" class = "botonesNotaPorAudio"></ion-textarea>

data包含您textArea的值, 也就是说,如果您输入“ Hello”,则TEH VARIBLE的值就是“ Hello”。

在“ .ts”文件中,您可以像这样进行somthenig:

dismiss(data:any) {  
    this.viewCtrl.dismiss(data);
  }

您将通过以下方式接收您的信息

 modal.onDidDismiss(data => {
  this.otherPuntoDescripcion=Object.assign({},data);
  this.puntoDescripcion.getDescripcion(this._dataBaseService,this.selectConvocatoria,localStorage.getItem("idPunto")).then(
    (resp:any)=>{   
      this.listPuntoDescription=resp;
    }
  );
});