我已经使用。map（）迭代了JSON，并将数据返回到HTML，并对数据应用CSS边框。
预期输出:每个数据必须有一个单独的边框。
实际输出:所有数据都有一个边框。
这里我把“Anitha”和“Saritha”返回到HTML，我想把这些名字分成两个在不同的边框中。
const obj = [{
name: "Anitha",
age: "25"
},
{
name: "Saritha",
age: "29"
},
]
this.name = obj.map(function(val) {
return val.name
}).join('\n')
<div id="borderDemo" style="white-space: pre-line">{{this.name}}</div>
#borderDemo {
border: 3px solid #1C6EA4;
}
请建议我正确的方法当前输出视图附上
结果是正常的，因为您在同一个HTML元素#borderdemo中写入两个名称。
如果您正在使用Angular，我建议您在HTML中循环您的名称。
测试。ts
const obj = [
{ name: "Anitha", age: "25" },
{ name: "Saritha", age: "29" },
];
this.names = obj;
test.html
<div id="borderDemo">
<div *ngFor="let name in names" class="bordered">{{ name }}</div>
</div>
test.css
.bordered {
border: 3px solid #1C6EA4;
}
请查看以下链接中的工作示例
https://codesandbox.io/s/nice-spence-f6c9z此处输入链接说明
