获取输入值并更新角度形式绑定中的按钮单击（事件处理）

Question

我正在开发运动计分板的应用程序，我已经成功绑定了表格数据。但是我有单击按钮以增加/减少分数，我面临的问题是我如何将输入绑定到按钮以增加/减少分数，非常感谢。

我已经绑定了表单数据并成功获取了所有字段

<form novalidate [formGroup]="boardData">
    <ion-grid>
        <ion-row>
            <ion-col size="12" class="match-details">
                <label>{{ teamData?.sportCategory }}</label>
                <label>{{ boardData?.boardDate | date }}</label>
                <label>{{ boardData?.boardDate | date: "HH:mm" }}</label>
            </ion-col>
        </ion-row>

        <ion-row>
            <ion-col size="6" class="center-col-items">
                <ion-thumbnail>
                    <img [src]="teamLogo" />
                </ion-thumbnail>
                <ion-label>
                    <p>{{ teamData.name }}</p>
                </ion-label>
            </ion-col>
            <ion-col size="6" class="center-col-items">
                <ion-button color="dark" size="small" shape="round" fill="outline"
                    (click)="changeBoardScore(1, 'teamScore')">
                    <ion-icon name="arrow-up"></ion-icon>
                </ion-button>
                <div class="score-container">
                    <ion-item>
                        <ion-input min="0" formControlName="teamScore" placeholder="0" type="number" name="team-score"
                            class="input-c">
                        </ion-input>
                    </ion-item>
                </div>
                <ion-button [disabled]="teamScore == 0" color="dark" size="small" shape="round" fill="outline"
                    (click)="changeBoardScore(-1, 'teamScore')">
                    <ion-icon name="arrow-down" slot="icon-only"></ion-icon>
                </ion-button>
            </ion-col>
        </ion-row>

        <ion-row class="m-tb">
            <ion-col size="6" class="center-col-items">
                <ion-label>Period</ion-label>
            </ion-col>
            <ion-col size="6" class="center-col-items">
                <div class="score-container">
                    <app-match-period [boardData]="boardData"></app-match-period>
                </div>
            </ion-col>
        </ion-row>

        <ion-row>
            <ion-col size="6" class="center-col-items">
                <ion-thumbnail>
                    <img [src]="opponentLogo" />
                </ion-thumbnail>
                <ion-label>
                    <p>{{ opponentData.name }}</p>
                </ion-label>
            </ion-col>
            <ion-col size="6" class="center-col-items">
                <ion-button color="dark" size="small" shape="round" fill="outline"
                    (click)="changeBoardScore(1, 'opponentScore')">
                    <ion-icon name="arrow-up"></ion-icon>
                </ion-button>
                <div class="score-container">
                    <ion-item>
                        <ion-label>
                            <ion-input min="0" formControlName="opponentScore" placeholder="0" type="number"
                                name="opponent-score" class="input-c">
                            </ion-input>
                        </ion-label>
                    </ion-item>
                </div>
                <ion-button [disabled]="opponentScore == 0" color="dark" size="small" shape="round" fill="outline" small
                    (click)="changeBoardScore(-1, 'opponentScore')">
                    <ion-icon name="arrow-down"></ion-icon>
                </ion-button>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <ion-item>
                    <ion-icon name="clock"></ion-icon> &nbsp; {{ smartTime }}
                </ion-item>
            </ion-col>
        </ion-row>
    </ion-grid>
</form>

这是我获取输入值以增加该更新的功能。

changeBoardScore($e, field) {
    let boardId = this.activatedRoute.snapshot.paramMap.get('id');
    if (this.boardData[field] != $e.detail.value && this.userHasBoard === true) {
        this.boardData[field] = $e.detail.value + 1
        this.boardService.updateBoard(boardId, this.boardData)
    } else {
        //this.presentToast('You do not have premission to update score!');
    }
}