Angular TypeScript通过弹窗更新dataService数组数据的实现问题

1. 修正数据服务字段类型定义 #

首先调整data-Service.ts中接口的字段类型，将两个手机号字段显式声明为字符串类型：

// data-Service.ts 核心代码
export interface ContactListEntry {
  // 其他原有字段保持不变
  mobileNumber: string;
  secondMobileNumber: string;
}

@Injectable({ providedIn: 'root' })
export class DataService {
  // 全局存储的联系人数组
  contact: ContactListEntry[] = [/* 初始联系人数据 */];
}

2. 调整主组件弹窗传参逻辑 #

主组件打开弹窗时，额外传入待编辑条目在联系人数组中的索引，避免仅传数据副本无法定位原数据的问题：

// table-list.ts 主组件核心代码
import { MatDialog } from '@angular/material/dialog';
import { DialogEditContactComponent } from './dialog-edit-contact.component';
import { DataService } from './data-Service';

@Component({/* 组件原有配置 */})
export class TableListComponent {
  constructor(
    private dialog: MatDialog,
    public dataService: DataService
  ) {}

  // 打开编辑弹窗的方法，入参为当前点击条目的数组索引
  openDialogEdit(entryIndex: number): void {
    this.dialog.open(DialogEditContactComponent, {
      data: {
        index: entryIndex,
        // 传数据副本，避免未保存就修改全局数据
        formData: {...this.dataService.contact[entryIndex]}
      }
    });
  }
}

3. 重写弹窗组件保存逻辑 #

弹窗组件注入DataService，保存时直接修改全局联系人数组对应索引的条目：

// dialog-edit-contact.ts 弹窗组件核心代码
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DataService } from './data-Service';
import { FormGroup, FormControl } from '@angular/forms';

@Component({/* 组件原有配置 */})
export class DialogEditContactComponent {
  editForm: FormGroup;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: {index: number, formData: any},
    private dataService: DataService,
    private dialogRef: MatDialogRef<DialogEditContactComponent>
  ) {
    // 初始化编辑表单
    this.editForm = new FormGroup({
      mobileNumber: new FormControl(this.data.formData.mobileNumber),
      secondMobileNumber: new FormControl(this.data.formData.secondMobileNumber),
      // 其他表单字段按需添加
    })
  }

  saveEditContact(): void {
    if (!this.editForm.valid) return;
    // 直接更新全局联系人数组的对应条目
    this.dataService.contact[this.data.index] = {
      ...this.dataService.contact[this.data.index],
      ...this.editForm.value
    };
    // 提交完成关闭弹窗
    this.dialogRef.close();
  }
}

异常排查 #

如果修改后列表页面没有同步更新，检查主组件是否用了ChangeDetectionStrategy.OnPush策略，这种情况可以把DataService里的contact数组改为BehaviorSubject类型，订阅数据变更后手动触发变更检测即可。
如果提交时报类型错误，可在保存时手动做类型转换：mobileNumber: String(this.editForm.value.mobileNumber)。

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