添加新消息时，聊天应用无法滚动

Question

我已经使用Ionic 4和Firebase创建了一个聊天应用程序。但是，它没有滚动，因此，我无法再添加任何消息。

这是html：

Incorrect syntax near the keyword 'for'.

这是我找到的示例，它可以正常工作...我可以添加消息，但它不会滚动。我没有收到错误

我根据海报建议添加了.css……它也不起作用，但是我可能做得不正确。

<ion-content>
  <ion-grid>
    <ion-row *ngFor="let message of messages.message">
      <ion-col size="9" *ngIf="myItinerary.userId !== message.userId" class="message other-user">
        <span>{{message.content}}</span>
        <div class="time" text-right><br>
        {{message.createdAt | date: 'short'}}</div>
      </ion-col>

      <ion-col offset="3" size="9" *ngIf="myItinerary.userId === message.userId" class="message me">
        <span>{{message.content}}</span>
        <div class="time" text-right><br>
        {{message.createdAt | date: 'short'}}</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

<ion-footer>
  <ion-toolbar light="light">
    <ion-row align-items-center no-padding>
      <ion-col size="10">
        <textarea autosize maxRows="3" [(ngModel)]="newMsg" class="message-input"></textarea>
      </ion-col>
      <ion-col size="2">
        <ion-button expand="block" fill="clear" color="primary" [disabled]="newMsg === ''" class="msg-btn"
        (click)="sendMessage()">
        <ion-icon name="ios-send" slot="icon-only"></ion-icon>
      </ion-button>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer>

每个

添加了CSS

Answer 1

您可以添加溢出或包装div，此外，您还可以添加一个样式表，该样式表由以下内容实现：overflow：auto和width：100％或height：;。如果是水平或垂直；

• https://angular.io/api/animations/style

    style({ display: "flex", flex-wrap: "wrap", overflow: "auto" })
  

Answer 2

我通过用ion-list替换ion-grid来解决此问题。

<ion-content>
  <ion-list lines="none">
    <ion-item *ngFor="let message of messages.message">
      <div size="9" *ngIf="myItinerary.userId !== message.userId" class="message other-user">
        <span>{{message.content}}</span>
        <div class="time" text-right><br>
        {{message.createdAt | date: 'short'}}</div>
        </div>

      <div offset="3" size="9" *ngIf="myItinerary.userId === message.userId" class="message me" slot="end">
        <span>{{message.content}}</span>
        <div class="time" text-right><br>
        {{message.createdAt | date: 'short'}}</div>
        </div>
    </ion-item>
  </ion-list>
</ion-content>