Angular单个对话框textarea绑定多变量的实现问题求助

问题核心原因 #

当前代码无法适配多备注框的问题出在两点：

1. 仅第一个输入框双向绑定了currentRemark，其他输入框绑定的是data中的具体字段，弹窗修改后无法同步回对应数据源
2. 未记录当前编辑的目标字段，弹窗关闭时无法将currentRemark的值更新到正确的位置

解决方案 #

通过存储目标字段的引用，让单个弹窗知道要更新的具体位置，同时调整绑定逻辑实现多字段适配：

1. 修改组件类（form-page.component.ts）

新增变量存储目标字段引用，完善弹窗关闭时的同步逻辑：

import { Component, OnInit } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';
import { FormBuilder, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { MessageService } from 'primeng/api';
import { EvaluationService } from './service/data';
import { Dropdown } from 'src/app/models/dropdown.model';
import { DropdownService } from 'src/app/services/dropdown.service';
import { FilterInput, PagedResultDto } from 'src/app/models/custom.model';
import { DefinitionLibrary } from 'src/app/models/definition-library.model';
import { DefinitionLibraryService } from 'src/app/services/definition-library.service';
import { TableLazyLoadEvent } from 'primeng/table';

@Component({
  selector: 'app-form-page',
  templateUrl: './form-page.component.html',
  styleUrl: './form-page.component.scss'
})
export class FormPageComponent implements OnInit {
  data: any;
  currentRemark!: string;
  // 新增：存储当前要更新的目标字段引用
  currentRemarkTarget!: any;
  // 补充visible变量初始化，避免undefined错误
  visible = false;

  constructor(public messageService: MessageService, public evaluationService: EvaluationService, private dropdownService: DropdownService, private definitionLibraryService: DefinitionLibraryService, private router: Router) { };

  openRemarksDialog() {
    this.visible = true;
  }

  // 修改：接收目标字段引用，同时初始化弹窗内容
  setRemark(target: any) {
    this.currentRemarkTarget = target;
    this.currentRemark = target;
  }

  hideRemarksDialog() {
    // 新增：将弹窗内容同步到目标字段
    if (this.currentRemarkTarget) {
      this.currentRemarkTarget = this.currentRemark;
    }
    this.visible = false;
  }

  ngOnInit(): void {
    this.getOpuDropdown();
    this.data = this.evaluationService.getEvaluationData()
  }

  // 保留原有方法（若存在）
  getOpuDropdown() {
    // 你的原有逻辑
  }
}

2. 修改模板文件（form-page.component.html）

调整输入框绑定方式，点击时传递目标字段引用：

<br><br>
<p-card class="p-fluid">
    <ng-template pTemplate="title">
        <span style="color:#00a499;">Maximum Demand (MVA)</span>
    </ng-template>
    <ng-template pTemplate="content">
        <div class="formgrid grid">
            <div class="field col">
                <label for="remarks_max_demand">Remarks</label>
                <!-- 单向绑定显示值，点击时传递目标字段引用 -->
                <input type="text" pInputText id="remarks_max_demand"
                    [ngModel]="data.generalData.max_demand.remarks_max_demand"
                    (click)="setRemark(data.generalData.max_demand.remarks_max_demand); openRemarksDialog()" />
            </div>
        </div>
    </ng-template>
</p-card>

<br><br>
<p-card class="p-fluid">
    <ng-template pTemplate="title">
        <span style="color:#00a499;">Total Installed Capacity (MVA)</span>
    </ng-template>
    <ng-template pTemplate="content">
        <div class="formgrid grid">
            <div class="col-12">
                <h4 style="text-align: left;">Grid</h4>
            </div>
            <div class="field col">
                <label for="remarks_TIC_grid">Remarks</label>
                <!-- 同样调整绑定和点击事件 -->
                <input type="text" pInputText id="remarks_TIC_grid"
                    [ngModel]="data.generalData.total_installed_capacity.remarks_TIC_grid"
                    (click)="setRemark(data.generalData.total_installed_capacity.remarks_TIC_grid); openRemarksDialog()" />
            </div>
        </div>
    </ng-template>
</p-card>

<p-dialog 
    [(visible)]="visible" 
    [style]="{ width: '600px' }" 
    header="Remarks" 
    [modal]="true" 
    styleClass="p-fluid">

    <ng-template pTemplate="content">
        <div class="field">
            <label for="remarks_input">Please type any remarks.</label>
            <textarea 
                id="remarks_input"
                rows="10"
                cols="30" 
                pInputTextarea 
                [(ngModel)]="currentRemark"
                >
            </textarea>
        </div>
    </ng-template>

    <ng-template pTemplate="footer">
        <p-button 
            label="Continue" 
            icon="pi pi-arrow-right" 
            [text]="true" 
            (onClick)="hideRemarksDialog()" />
    </ng-template>
</p-dialog>

逻辑说明 #

• 利用对象引用特性，currentRemarkTarget直接指向data中的具体字段，弹窗修改后赋值即可同步更新数据源
• 输入框改用单向绑定[ngModel]，避免和currentRemark的双向绑定冲突，同时自动同步显示最新值
• 单个弹窗通过切换目标引用，实现对多个备注字段的编辑支持

内容的提问来源于stack exchange，提问作者not_castillo