Question

我想创建一个Angular App，它在设计中显示一个JSON数据结构，该结构与聊天框非常相似。我已经为“聊天框”创建了一个组件

示例结构（也是我chatbox.component.ts中的唯一内容）：

  test = [
    { "date":"1","sender":"x","answer":"hello"},
    { "date": "2", "sender": "y", "answer": "hello my friend" },
    { "date": "3", "sender": "z", "answer": "bye" }
  ];

Chatbox.component.html：

<div class="inboxContainer">
        <tr *ngFor="let msg of test">
            <div class="wrapper">
                <div class="sender">Sender: {{msg.sender}}</div>
                <div class="date">Date : {{msg.date}}</div>
            </div>
            <div class="answer">Message: {{msg.answer}}<br></div>
        </tr>
</div>
<div class="newMessageContainer">
    <mat-form-field>
        <mat-label>New Message</mat-label>
        <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
            cdkAutosizeMaxRows="3"></textarea>
    </mat-form-field>

</div>
<div class ="sendMessageContainer">
<button mat-button>
    Send
</button>
</div>

Chatbox.component.css：

.inboxContainer {
    width: 40vw;
    height: 60vh;
    border: 1px solid black;
     margin: auto;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
}
.newMessageContainer {
     margin: auto;
     position: absolute;
     top: 80vh;
     left: 30vw;
     bottom: 0;
     right: 0;
}
.mat-form-field {
  width: 30vw;
  top:0.1vh;
}
.mat-button {
    left: 4vw;
    top:1.4vh;
    background-color: #B29B59;
}
.sendMessageContainer {
        margin: auto;
        position: absolute;
        top: 80vh;
        left: 60vw;
        bottom: 0;
        right: 0;
}
.wrapper {
  display:flex;
}
.date {
  border:1px solid black;
  width: 20vw;
  border-right:none;
  border-left:none;
}
.sender {
border:1px solid black;
width: 20vw;
border-left:none;
}
.answer {
width: 38.8vw;
height: 18vh;
}

按钮本身可以忽略，实际上只是显示结构的方式。正确地显示消息：它尚未设计，目前还不十分重要。我无法显示3条消息，但是如果我尝试显示4,5或6条消息，则它会通过边框溢出（边框是固定的，尺寸应保持不变）。
我的问题是：如何向div添加滚动条？

这里还有一个示例，显示了当我尝试显示4条消息时的外观：

Answer 1

首先，发现tr标签使用不正确。

<tr *ngFor="let msg of test">
  <div class="wrapper">
      <div class="sender">Sender: {{msg.sender}}</div>
      <div class="date">Date : {{msg.date}}</div>
  </div>
  <div class="answer">Message: {{msg.answer}}<br></div>
</tr>

不确定为什么将tr用作此职位。 tr仅应在table标记内使用。您需要将其替换为div。另外，您需要为overflow: auto;添加.inboxContainer，如下所示。

.inboxContainer {
    width: 40vw;
    height: 60vh;
    border: 1px solid black;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
}

Answer 2

您可以将overflow: auto添加到.inboxContainer。这样您将拥有

.inboxContainer {
  overflow: auto; // you can use 'overflow: scroll;' and always have reserved space for scrollabar
  width: 40vw;
  height: 60vh;
  border: 1px solid black;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

角度滚动div

2 个答案: