Модальный текст возвращает undefined

Итак, я исследовал это в течение достаточно долгого времени. У меня есть модальное окно с текстовым полем внутри. Я хочу, чтобы когда кто-то нажимал «Опубликовать», я хотел бы видеть, что они публикуют. На данный момент он возвращает undefined, и я не могу понять, почему. Вот код:

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.info(complete);
  }    
  check(key) {
    console.info(key);
  }


submitPost() {
    // console.info(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.info в разделе addComment.