나는 문으로 두 개의 매트 탭을 제어하고 있습니다. 두 매트 탭 요소는 카드 목록을 포함하고 ng-container의 문으로 제어됩니다. 흥미롭게도 첫 번째 탭에서 마우스를 가리키면 카드 상단에서 여백이 거의 없습니다 ng-star라고 말합니다. -inserted.이 논리의 반대는 두 번째 mat-tab 카드 요소에도 적용되었으며 아래쪽에서 여백 <ng-container *ngIf="!appointment.passed">
이 있습니다.이 줄을 제거하면 불필요한 여백을 제거 할 수 있지만 논리가 작동하지 않습니다. 어떻게 제거 할 수 있습니까? 제어가 통과했는지 아닌지 논리를 잃지 않고이 불필요한 마진.
상단 여백 (활성 약속 탭)
<ng-container *ngIf="!appointment.passed">
하단 여백 (과거 약속 탭)
<ng-container *ngIf="appointment.passed">
아래 약속 배열 (각 객체의 끝에 true 값을 전달했거나 전달하지 않았습니다. 그게 전달 여부를 결정하는 방법입니다)
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; }
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다