Question

我想根据另一个div值设置一个div值：

<div #priceRef>{{ price(9) }}</div>
<div>{{ priceRef }}</div>

一个更复杂的示例，我想计算2个div值的差：

<div #total1Ref>{{ total(1) }}</div>
<div #total2Ref>{{ total(2) }}</div>
<div>{{ total1Ref - total2Ref }}</div>

这里的想法是避免对price和total的额外调用以节省时间。

Answer 1

您可以通过innerText属性访问文本，只有在文本中只有数字的情况下，此功能才有效

<div #total1Ref>{{ total(1) }}</div>
<div #total2Ref>{{ total(2) }}</div>
<div>{{ total1Ref.innerText - total2Ref.innerText }}</div>

Answer 2

例如，如果您将某些东西与value属性一起使用，则可以利用value属性来完成所需的工作。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<option #total1Ref value={{value1}}>{{value1}}</option>
            <option #total2Ref value={{value2}}>{{value2}}</option>
            <div>{{ total1Ref.value - total2Ref.value }}</div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  value1 = 10;
  value2 = 5;   
}

修订版：

下面是使用函数的示例

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<input #total1Ref value={{total(20)}} style="border: 0;"/>
            <input #total2Ref value={{total(10)}} style="border: 0;"/>
            <div>{{ total1Ref.value - total2Ref.value }}</div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  value1 = 10;
  value2 = 5;  

  total(num){
    return this.value1 + this.value2 + num
  } 
}

在Angular 6中从其他div值设置div值

2 个答案: