如何擺脫頁面上不必要的ng-container邊距？

Question

我正在用語句控制兩個 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", …}

Answer 1

嗨，請注意您的間隙是填充並且沒有邊距。

另外在使用<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; }
}