关于angular：从fxLayoutGap删除行的最后一个元素的填充

Remove padding from fxLayoutGap last element of row

我在使用fxLayoutGap时遇到问题。我列表的最后一列有填充，我不想要。

如何保持fxLayoutGap(卡之间的空间)并从最后一列中删除填充？谢谢！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<mat-card (click)="addAdvert()" class="mat-card-add-button">

<span style="font-size:32px;text-align:center">+<br />test</span>

</mat-card>

<mat-card class="ad">
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-title>test</mat-card-title>
<mat-card-content>
<p>
test
</p>
</mat-card-content>
<mat-divider [inset]="true"></mat-divider>
<mat-card-actions align="end">
<button mat-icon-button matTooltip="edit" matTooltipShowDelay="800">
<mat-icon>mode_edit</mat-icon>
</button>
<button mat-icon-button matTooltip="delete" matTooltipShowDelay="800">
<mat-icon>delete</mat-icon>
</button>
</mat-card-actions>
</mat-card>

问题(红色)：

enter image description here

更新资料

我使用了Abdul Rafay的解决方案，但这是一个新问题：

enter image description here

您可以使用ngFor中的index指定行的最后一项，比方说4列：

1	[class.flexLastItem]="((i-3) % 4 === 0)"

终于只是CSS

1	.flexLastItem{ margin-right: 0 !important; }

编辑：尝试通过ngFor在此处为元素分配类：

1
2
3
4

<div fxFlex="calc(25%-20px)" fxFlex.md="33"
*ngFor="let product of products;let i = index"
[ngClass]="'product-'+getClassName(i)">
...

.ts：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

counter: number = 0;

getClassName(index) {
if(index%4 === 0)
this.counter = 0;
this.counter++;
switch(this.counter) {
case 1:
return"first"
case 2:
return"second"
case 3:
return"third"
default:
return"fourth"
}
}

然后添加以下css样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.product-first[fxFlex] {
padding-right: 20px !important;
}
.product-second[fxFlex] {
padding-left: 6.66px !important;
padding-right: 13.34px !important;
}
.product-third[fxFlex] {
padding-left: 13.34px !important;
padding-right: 6.66px !important;
}
.product-fourth[fxFlex] {
padding-left: 20px !important;
padding-right: 0 !important;
}

我不确定这是否是最好的方法，但是它可以工作。

旧的ans：只需添加css样式：

1	[fxFlex]:last-of-type { padding-right:0px !important; }

如果有多个行：

1	[fxFlex]:nth-child(4n) { padding-right:0px !important; }

如果还有更多fxFlex元素，则可以分配一个类：

1
2
3

...

.padding-fix[fxFlex]:nth-child(4n) { padding-right:0px !important; }