我正在嘗試制作一些應用程式，但我不知道如何更改在父組件中定義并在子組件中訪問的變數值。下面是子組件的代碼： 這是子 component.html 代碼：
<p>Child Component Works!</p>
<h2>{{name.name1}}</h2>
<h4>{{name.Money1}}</h4>
<h2>{{name.name2}}</h2>
<h4>{{name.Money2}}</h4>
子組件.ts 代碼：
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>
父組件.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。
uj5u.com熱心網友回復：
顯示資料的結構不太好，場景有些粗略，但如果你不打算改變 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 保留了它們的型別。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/410100.html
標籤：