[英]How to get rid of unnecessary ng-container margin on the page?
我正在用语句控制两个 mat 标签。两个 mat-tab 元素都包含卡片列表,并由 ng-container 中的语句控制。有趣的是,在第一个标签上,当我将鼠标悬停在鼠标上时,卡片与顶部的边距很小说 ng-star -inserted.Opposite 这个逻辑也适用于第二个 mat-tab 卡片元素,它从底部有边距。当我删除<ng-container *ngIf="!appointment.passed">
这一行时。我可以去掉不必要的边距但显然逻辑不起作用。如何在不丢失控件已通过或未通过的逻辑的情况下摆脱这种不必要的余量。
顶部边距(活动约会选项卡)
<ng-container *ngIf="!appointment.passed">
底部边距(过去的约会选项卡)
<ng-container *ngIf="appointment.passed">
下面的约会数组(在每个对象的末尾是否传递了真值。这就是我如何确定它们是否通过)
0: {id: 36, appointmentDate: "2019-12-27T10:28:15", doctorName: "Conner Reyes", departmentName: "Urology", hospitalName: "Genopkins Hospital", …}
1: {id: 57, appointmentDate: "2020-01-03T08:29:25", doctorName: "Ayesha Brewer", departmentName: "Eye Center", hospitalName: "Genopkins Hospital", …}
2: {id: 40, appointmentDate: "2020-01-11T17:23:39", doctorName: "Shelbie Jenkins", departmentName: "Gynecologic Oncology", hospitalName: "Genopkins Hospital", …}
3: {id: 58, appointmentDate: "2020-01-15T15:45:19", doctorName: "Kirsty Armstrong", departmentName: "Eye Center", hospitalName: "Genopkins Hospital", …}
4: {id: 93, appointmentDate: "2020-01-16T17:26:27", doctorName: "Claire Burton", departmentName: "Eye Center", hospitalName: "Mediclinic Hospital", …}
嗨,请注意您的间隙是填充并且没有边距。
另外在使用<ng-container></ng-container>
时创建注释
例如不是一个元素。
<ng-container *ngIf="true">
<div>
hi
</div>
</ng-container>
将在 DOM 中解析为:
<!--bindings={
"ng-reflect-ng-if": "true"
}--><!---->
<div _ngcontent-jim-c0=""> hi </div>
如果 mat-card 是外部组件,请尝试在您的 css 组件代码中使用 ::ng-deep。
也许是这样的:
::ng-deep {
.mat-card.ng-star-inserted { padding: 0; }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.