Question

我正在使用Angular2，当我创建一个boolean来显示页面上的不同内容时，我收到此错误：

TypeError：无法读取未定义
的属性'scrollToBottom'

如果我删除booleans不会崩溃，但如果我这样做了。

我的html看起来像这样：

<ng-container *ngIf="startChat">

    <ion-header>
      <ion-navbar>
        <ion-title>{{channel}}</ion-title>
      </ion-navbar>
        <ion-avatar item-left>
        <img src="{{image}}">
      </ion-avatar>    
    </ion-header>

    <ion-content class="has-header has-footer content-stable">

        <ion-infinite-scroll (infinite)="onScroll($event)">
          <ion-infinite-scroll-content></ion-infinite-scroll-content>
        </ion-infinite-scroll> 

        <div *ngFor="let content of messages" class="message-wrapper">

          <div *ngIf="content.sender=='sender'">

            <img class="profile-pic left" src="{{image}}" />

            <div class="chat-bubble left">
              <div class="message-detail">
                <span>{{content.date | date:"dd/MM/yyyy h:mma"}}</span>
              </div>

              <div class="message" [innerHTML]="content.content">
              </div>
            </div>
          </div>
          <div *ngIf="content.sender=='reciever'">
            <img class="profile-pic right" src="{{image}}" />
            <div class="chat-bubble right">
              <div class="message-detail">
                <span>{{content.date | date:"dd/MM/yyyy h:mma"}}</span>
              </div>
              <div class="message" [innerHTML]="content.content">
              </div>
            </div>

          </div>

        </div>
    </ion-content>
    <ion-footer>
      <form [formGroup]="messageForm" (ngSubmit)="sendMessage(messageForm.value)">
        <ion-toolbar position="bottom">
          <ion-textarea placeholder="Type your message here" formControlName="message" [(ngModel)]="message" (ngModelChange)="ngOnChanges($event)"></ion-textarea>
          <ion-buttons end>
            <button ion-button icon-only type="submit" [disabled]="!messageForm.valid"><ion-icon name="send"></ion-icon></button>
          </ion-buttons>
        </ion-toolbar>
      </form>
    </ion-footer>
  </ng-container>

如果我删除startChat变量，则表明页面完美，但当时更改视图或将boolean放在ng-container上它会开始崩溃...

这是崩溃的方法

  scrollToTop() {
    var THIS = this.content;
    setTimeout(function () {
        THIS.scrollToBottom(); 
    }, 100);
  }

我缺少什么，我可以使用其他组件而不是ng-container吗？我尝试使用<div *ng-if=startChat>并在<ng-container>内显示除<ion-content>

以外的所有内容

如果我使用<div>标记放入<ng-container>，则会显示此错误

main.js：1581 ERROR TypeError：无法读取属性'scrollToBottom'为null

我console.log(THIS)，它显示content{}不为空。

ng-container * ng-if = boolean返回内容undefined

0 个答案: