Angular 如何将ngClass与数据绑定一起使用?
我需要使用引导类,利用Angular的Angular 如何将ngClass与数据绑定一起使用?,angular,Angular,我需要使用引导类,利用Angular的ngClass指令,但在我打算使用stock.in_stock时使用数据绑定,当它小于stock.minimum_stock时,ngClass标记错误,但如果我使用stock.in_stock并将其与一个单位值进行比较,没问题 我的目的是标记或向用户显示哪个产品等于或低于该公司声明的最低库存 图像 代码 <tr *ngFor="let stock of inventory | paginate: { itemsPerPage: 10, current
ngClass
指令,但在我打算使用stock.in_stock
时使用数据绑定,当它小于stock.minimum_stock
时,ngClass
标记错误,但如果我使用stock.in_stock
并将其与一个单位值进行比较,没问题
我的目的是标记或向用户显示哪个产品等于或低于该公司声明的最低库存
图像
代码
<tr *ngFor="let stock of inventory | paginate: { itemsPerPage: 10, currentPage: page }, index as id "
[ngClass]="{ 'bg-warning': stock.in_stock <= stock.minimum_stock }">
<td>{{id+1}}</td>
<td>{{stock.product_name}}</td>
<td class="text-center">
{{stock.in_stock}}
<span *ngIf="stock.in_stock < stock.minimum_stock">
<i class="fas fa-exclamation-triangle" placement="bottom" ngbTooltip="The product on your inventory is less to minimum stock declared."></i>
</span>
</td>
<td class="text-center">{{stock.minimun_stock}}</td>
<td>{{stock.warehouese_name}}</td>
<td>{{stock.ubication_name}}</td>
<td class="text-right">{{stock.product_cost | currency}}</td>
<td class="text-right">{{stock.product_cost * stock.in_stock | currency}}</td>
<td class="text-center">
<button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#modalConsultProduct">
Consult
</button>
</td>
</tr>
{{id+1}}
{{stock.product_name}
{{stock.in_stock}
{{stock.minimun_stock}
{{stock.warehouese_name}
{{stock.ublication_name}
{{stock.product|u cost|currency}}
{{stock.product_cost*stock.in_stock|currency}
咨询
如图中所示,该类标记了错误的方式。因为,第二项(42)不小于或等于(5)
谢谢 这就是我通常绑定到class属性的方式
[class.bg-warning]="!!(stock.in_stock <= stock.minimum_stock)"
[class.bg warning]=”!!(stock.in_stock您可以改用此方法
[class.bg-warning]="stock.in_stock <= stock.minimum_stock"
[class.bg warning]=“stock.in_stock我猜的是stock.in_stock
和stock.minimum_stock
是字符串而不是数字,这意味着它正在执行“42”您显示的代码对我来说看起来不错。请创建一个。我建议使用。您好,看,它标记了一个错误:错误类型错误:“\u co.parseInt不是一个函数”
并标记每个错误的迭代(白色,不可见)抱歉,尝试Number()
而不是parseInt()
@JosephWebber-尝试+stock.in_stock@ConnorsFan啊,我不知道。使用+
将是我最后一个似乎很好用的建议(在实际测试这些建议之后)在这一点上,我会看看你的css,也许其他一些样式正在覆盖bg警告样式?在你的第一个示例中,一切看起来都很好。
[ngClass]="{ 'bg-warning': +stock.in_stock <= +stock.minimum_stock }"
[class.bg-warning]="+stock.in_stock <= +stock.minimum_stock"