如何将在父组件中定义并使用按钮在子组件中访问的变量值更改为 10？

Question

我正在尝试编写一个应用程序，但我不知道如何更改在父组件中定义并在子组件中访问的变量值。

下面是子组件的代码：

这是子组件 HTML 标记：

   <p>Child Component Works!</p>
   <h2>{{name.name1}}</h2>
   <h4>{{name.Money1}}</h4>
    <h2>{{name.name2}}</h2>
   <h4>{{name.Money2}}</h4>

子组件打字稿代码：

    import { Component, EventEmitter,  OnInit, Input } from "@angular/core";

   @Component({
        selector: 'app-child-component',
        templateUrl: './child-component.component.html',
        styleUrls: ['./child-component.component.css']
   })
   export class ChildComponentComponent implements OnInit {
      @Input() name;

      constructor() { }
 
      ngOnInit() {
      }
  }

Parent-component.html 标记：

 <p>
  Parent Component
  </p>
  <app-child-component [name]="data"></app-child-component>
  <button>
  Send Money To Jack
  </button><br><br>
  
  <button>
  Send Money To Jill
  </button>

Parent-component.ts代码：

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

  @Component({
      selector: 'app-parent-component',
      templateUrl: './parent-component.component.html',
      styleUrls: ['./parent-component.component.css']
   })
   export class ParentComponentComponent implements OnInit {
  
      data = {
         name1:'jack',
         Money1:10,
         name2:'Jill',
         Money2:'15'
      }
  constructor() { }

  ngOnInit() {
  }
  }

这是完整的代码。下面是输出的屏幕截图：

这是输出。我想要一些功能，当用户点击第一个按钮时，money1 变量增加 10，当用户点击第二个按钮时，money2 变量增加 10：

Answer 1

显示数据的结构不太好，场景有些粗略，但如果您不打算更改 atm，请看这里：

为按钮添加点击功能：

<button (click)="incrementJack()">Send Money To Jack</button>

<button (click)="incrementJill()">Send Money To Jill</button>

在父 ts 中定义它们：

  incrementJack(){
    this.data.Money1 += 10;
  }

  incrementJill(){
    let amount = parseInt(this.data.Money2) + 10;
    this.data.Money2 = amount.toString();
  }

注意 money1 是数字，money2 是字符串，所以这个 cod 保留了它们的类型。

如何将在父组件中定义并使用按钮在子组件中访问的变量值更改为 10？

How to change a variable value by 10 which is defined in parent component and accessed in child component using button?

html

javascript

angular

stackblitz

angular10