我想创建一个 Angular 应用程序,它在与聊天框非常相似的设计中显示 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" }
];
聊天框.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>
聊天框组件.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 添加滚动条?
最佳答案
首先,注意到 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
。另外,您需要为 .inboxContainer
添加 overflow: auto;
,如下所示。
.inboxContainer {
width: 40vw;
height: 60vh;
border: 1px solid black;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
}
关于html - Angular 可滚动的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57035961/