Question

所以基本上我有一个包含几个不同变量的模型。有五个不同的变量，我想通过更改在该按钮中传递的数据，使用一个函数来增加基于单击哪个按钮的相应统计数据。基本上我有五个不同的按钮，看起来像这样。

<h4>
<span>Str: {{currentCharacter.classStr}}</span>
<button (click) = "onStatIncrease()">+</button>
</h4>

classStr是模型中的五个变量之一，当按下按钮时我需要增加它，所以我需要做的是弄清楚如何设置我的函数以知道要增加哪个变量。

onStatIncrease(){
 <figure out which button was clicked and increase the corresponding variable accordingly>
}

我不确定要传递哪些数据或如何执行此操作。任何帮助将不胜感激。

Answer 1

如果我理解您的问题，这可以帮助您：

<h4>
    <span>Str: {{currentCharacter.classStr}}</span>
    <button (click) = "onStatIncrease('variable-1')">+</button>
</h4>


onStatIncrease(whichVariableToIncrease){
    switch(whichVariableToIncrease) {
        case 'variable-1':
            // Update the right variable.
            break;

        case '...':
            // ...
            break;
    }
}

更新

也许这个解决方案更好（没有测试）

<button (click) = "onStatIncrease('classStr')">+</button>

...

onStatIncrease(whichVariableToIncrease) {

     this.currentCharacter[whichVariableToIncrease] += 1;

Answer 2

如果所有这些按钮都嵌套在同一个父级下，则可以使用event delegation为所有这些按钮创建一个事件侦听器。即使它们没有嵌套，您仍然可以在<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:soap="http://www.alcatel-lucent.com/soap_cm"> <soapenv:Header/> <soapenv:Body> <bas:setMO> <query> <soap:baseObj>hhh</soap:baseObj> <soap:sc>ggggg</soap:sc> </query> <modi> <Attribute> <soap:mo> <soap:name>epsServiceProfile</soap:name> <soap:value>false</soap:value> </soap:mo> <operator>hhhh</operator> </Attribute> </modi> </bas:setMO> </soapenv:Body> </soapenv:Envelope>上添加点击监听器。

e.g。

document

您提到要更改5个变量。我不确定如何在Angular端表示数据，但是您可以将键传递给按钮的数据属性以查找需要更改的变量。

所以你的按钮看起来像这样：

document.addEventListener('click', (e) => {
  if (e.target.matches('button')) {
    // increase the value of the current character
  }
})

您可以通过执行以下操作从侦听器获取该属性：

<button data-id="classStr">+</button>

Answer 3

我假设你有一个对象数组

currentCharacter = [
    {key: 'classStr', value:1},
    {key: 'classDex', value:2},
    {key: 'classInt', value:3},
    {key: 'classWis', value:4},
    {key: 'assCon ', value:5}
  ];

您可以使用*ngFOr索引

<div *ngFor="let item of currentCharacter; let i = index">
  <h4 >
      <span>Str: {{item.value}}</span>
      <button (click) = "onStatIncrease(i, item.value)">+</button>
  </h4>
</div>

并在您的函数中传递索引和值以进行更新。

onStatIncrease(index, value){
    this.currentCharacter[index].value = value+1;
}

如何使用单击侦听器来增加模型中变量的值

3 个答案: