javascript - 我正在找到 this.myScrollContainer.nativeElement.scrollHeight 但无法读取未定义的属性“nativeElement”

Question

scrollHeight当我打开这个模板时，我需要从代码中找出一个 div this.myScrollContainer.nativeElement.scrollHeight。但我越来越nativeElement。实际上 div 滚动是从上到下的。我需要做的是从下到上滚动。有谁知道是什么问题？

<ng-template #ModalReviewHistory>
      <div class="modal-header">
        {{ "workFlowCommentsHistory.commentModalTitle" | translate }}
        <button
          type="button"
          class="close pull-right"
          aria-label="Close"
          (click)="modalRef.hide()"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body scroll" #scrollMe >
        <div  class="container box" *ngIf="commentHistory === null">
          {{ "workFlowCommentsHistory.noCommentMessage" | translate }}
        </div>
        <!-- <ul class="p-0"> -->
        <div class="round" *ngFor="let comments of commentHistory; let i = index">
          <div class="bs-callout bs-callout-default mb-0">
            <div class="talktext pt-1">
              <div class="row">
                <div class="col-4 font-12">
                  <strong>{{ comments?.creator?.firstName }}</strong> |
                  <strong>{{ comments.role }}</strong>
                </div>
                <div class="col-5 font-12">
                  {{ comments?.creator?.createdAt | myDateFormat }}
                </div>
                <!-- <div class="col-5"></div> -->
                <div class="col-2 text-left">
                  <div
                    *ngIf="
                      comments.formKey === 'edjw:panelReviewTask' ||
                      comments.consolidatedTask === true
                    "
                  >
                    <button
                      (click)="clickViewMore(comments.id, FeedbackModel)"
                      type="button"
                      class="btn btn-outline-primary font-12 btn-sm"
                    >
                      {{ "workFlowCommentsHistory.viewBtn" | translate }}
                    </button>
                  </div>
                </div>
                <div class="col-1 text-right">
                  <button
                    (click)="onClickReplyToComment(i, comments)"
                    class="btn btn-outline-primary btn-sm"
                    title="Reply"
                  >
                    <i class="fa fa-reply text-info"></i>
                  </button>
                </div>
              </div>
              <div class="row pl-3">
                {{ comments?.contents }}
              </div>
            </div>

                 </div>
          <br />
          <div class="row">
            <div class="col-3"></div>
            <div *ngIf="comments.repliesPost" class="col-9">
              <div
                *ngFor="let reply of comments.repliesPost; let index = index"
                [ngClass]="{
                  'bs-callout bs-callout-default margin-5-left':
                    reply.isCommentOwner,
                  'bs-callout-right bs-callout-default-right margin-6-right': !reply.isCommentOwner
                }"
              >
                <!-- <p
                  *ngIf="
                    lineCommentReplyEditIndex.replyIndex !== index ||
                    lineCommentReplyEditIndex.commentIndex !== commentIndex
                  "
                  [innerHTML]="reply.contents"
                ></p> -->

                <div class="row">
                  <div class="col-9 font-12">
                    <strong>
                      {{ reply.creator }} |
                      {{ reply.createdAt | myDateFormat }}</strong
                    >
                  </div>
                </div>

                <div class="row pl-3 py-2">
                  {{ reply?.contents }}
                </div>
              </div>
            </div>
          </div>
          <div *ngIf="lineCommentReplyIndex === i" class="row">
            <form [formGroup]="lineNumberReplyCommentForm" novalidate>
              <div class="col-md-1"></div>
              <div class="col-md-9">
                <div class="form-group">
                  <textarea
                    placeholder="Your comment goes here..."
                    pInputTextarea
                    formControlName="comment"
                    class="form-control"
                    rows="2"
                    style="width: 350px;"
                  ></textarea>
                  <div
                    class="ui-message ui-messages-error ui-corner-all"
                    *ngIf="
                      lineNumberReplyCommentForm.controls['comment'].invalid &&
                      lineNumberReplyCommentForm.controls['comment'].dirty
                    "
                  >
                    <i class="fa fa-close"></i>
                    <span
                      *ngIf="
                        lineNumberReplyCommentForm.controls['comment'].errors
                          .required
                      "
                      >{{
                        "lineComments.viewLineComment.replyCommentValidation"
                          | translate
                      }}</span
                    >
                  </div>
                </div>
              </div>
              <div class="col-md-2">
                <button
                  (click)="submitlineNumberReplyCommentForm()"
                  class="btn btn-primary"
                >
                  {{ "lineComments.viewLineComment.replyBtn" | translate }}
                </button>
              </div>
            </form>
          </div>
        </div>
        <!-- </ul> -->
      </div>
      <div class="modal-footer">
        <button
          (click)="modalRef.hide()"
          type="button"
          class="btn btn-outline-primary"
        >
          {{ "prReviewResponseModal.cancel" | translate }}
        </button>
      </div>
      </ng-template> 

          @ViewChild('scrollMe')  myScrollContainer: ElementRef;
          @ViewChild('ModalReviewHistory') ModalReviewHistory: ElementRef;
    onShowReviewerList() {
     this.modalRef = this.modalService.show(this.ModalReviewHistory,
        Object.assign({}, {
          class: 'gray modal-lg'
        },
        this.config));
    this.scrollToBottom();
    }
    scrollToBottom() {
      this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
    }

标签： javascriptangular

Answer 1

<ng-template>不是 DOM 中的物理元素。将其转换为在 DOM 中创建的 a<div>或其他内容应该可以解决您的问题。

例如：

<div #ModalReviewHistory>
  <!-- modal stuff here -->
</div>

您可以通过检查创建的 HTML 来诊断这一点。你会发现那<ng-template>是不存在的。