angular-material - 在 ngIf 过滤器之后,Mat Cards 没有重新排列到同一行
问题描述
我试图了解在单击切换按钮以满足 *ngIf 条件后,我的代码的哪一部分导致我的仪表板上的 mat-cards 不填充同一行。我在浏览器上使用了检查工具,我认为问题在于它仍然认为那里有一张卡,而实际上没有。启动另一个 API 调用来更新卡片听起来不正确,所以我猜测使用 *ngIf 是正确的方法,但我似乎无法理解为什么它实际上并没有删除并显示我想要的卡片同一行。它也可能与 Flex 布局响应能力有关?使用 ng-container 似乎解决了卡片位于不同行的问题,但它消除了我需要保持仪表板整洁的任何 Flex 布局响应能力。我猜那里'
这是垫卡容器的代码
<div style="padding-left: 60px; padding-top: 16px;" fxLayout="row wrap" fxLayoutGap="8px">
<ng-container *ngFor="let pvsTrip of pvsTrips; let i = index" >
<div *ngIf="(milesToggle && pvsMilesVariance.includes(pvsTrip.scheduleNum)) || !milesToggle" fxFlex.gt-md="32%" fxFlex.lt-sm="100%" fxFlex.md="48%"
fxLayout.lt-sm="column">
<div *ngIf = "(cToggle && !ncToggle && !neToggle && compliance.includes(pvsTrip.scheduleNum)) || (!cToggle && ncToggle && !neToggle && compliance.includes(pvsTrip.scheduleNum)) || (!cToggle && !ncToggle && neToggle && compliance.includes(pvsTrip.scheduleNum)) || (!cToggle && !ncToggle && !neToggle)">
<mat-card>
</mat-card>
提前为凌乱的截图道歉。我那里有我无法公开的数据。
解决方案
推荐阅读
- java - Innerclass 属于 Outerclass 的实例,那么为什么它可以声明为 static 以及我们如何能够制作静态类的实例?
- angular - 有没有一种方法可以从 typescript 中的接口读取属性名称,类似于 c# 中的反射
- json - TSV 到 JSON 大文件 ~8.5 GB
- java - 在 Java 2D 中渲染文本轮廓
- spring - 如何在控制器内模拟rest api调用
- apache-flink - Flink:从 Kinesis 读取导致 ReadProvisionedThroughputExceeded
- discord.py - 如何使嵌入粗体中的几个单词和其余正常文本?另外,如何在机器人消息中添加反应按钮?
- c# - 为什么 Blazor wasm 应用程序中的 CSharpCompilation.GetDiagnostics 方法在异步方法中使用时会抛出 System.PlatformNotSupportedException?
- winapi - Win32 函数成功后如何从 PWSTR 中检索字符串?
- macos - Rosetta 下的运行时库崩溃