如何在角度7的一个ngfor下将两个不同插值的值相乘

时间:2019-06-04 09:43:51

标签: javascript angular angular7

如何在角度7的ngfor下两个不同插值中的值相乘

<tr *ngFor="let element of marketArray ">
  <td class="text-center">1</td>
  <td> {{element.price}} </td>
  <td> {{element.quantity}} </td>
  <td>!{{element.price}} * {{element.quantity}}!</td>
</tr>

4 个答案:

答案 0 :(得分:3)

您可以简单地将两个表达式连接在一起。

{{element.price * element.quantity}}

您可以参考Angular文档,了解interpolations的用法。

答案 1 :(得分:2)

{{}}中的所有内容均被视为javascript表达式。 只需将数学放在括号内即可。

<tr *ngFor="let element of marketArray ">
  <td class="text-center">1</td>
  <td> {{element.price}} </td>
  <td> {{element.quantity}} </td>
  <td>{{element.price * element.quantity}}</td>
</tr>

答案 2 :(得分:1)

您必须这样做。

  

{{num1 * num2}}

<tr *ngFor="let element of marketArray ">
  <td class="text-center">1</td>
  <td> {{element.price}} </td>
  <td> {{element.quantity}} </td>
  <td>!{{element.price * element.quantity}}!</td>
</tr>

答案 3 :(得分:1)

尝试这样:

<td><span [innerHtml]="getMultipliedValue(element.price,element.quantity)"></td>

<td>{{getMultipliedValue(element.price,element.quantity)}}</td>

TS:

  getMultipliedValue(price:number, quantity:number) {
    return price * quantity;
  }

或者您可以直接将其相乘:

{{element.price * element.quantity}}