Angular提交按钮调用API报错：this.data未定义问题求助

核心错误原因 #

this.data仅在组件中声明但未初始化/赋值，直接访问this.data.id触发undefined错误。此外存在多处语法、逻辑缺失问题，需逐一修正：

分步修复方案 #

1. 替换this.data为表单提交数据 #

组件中无需依赖未定义的this.data，直接从表单控件提取提交数据（匹配PhoneNumbers接口结构）：

onSubmit(): void {
    if(this.emergencyNumberGroup.invalid) {
        return;
    }
    
    // 从formArray提取号码数据（若为多号码可遍历处理）
    const submitData: PhoneNumbers = this.numbers.controls[0].value;
    
    this.error$.next("");
    this.setService.updateNumbers(submitData).pipe(take(1)).subscribe({
        next: () => {
            this.openSnackBar('شماره همراه با موفقیت ذخیره شد', 'بستن')
        },
        error: (err: unknown) => {
            console.log(err);
            this.openSnackBar('شماره همراه ذخیره نشد', 'بستن')
        }
    });
}

2. 修复模板提交事件与表单结构 #

添加表单容器并绑定提交事件，确保点击按钮触发onSubmit：

<form [formGroup]="emergencyNumberGroup" (ngSubmit)="onSubmit()">
    <mat-card>
        <h2 mat-dialog-title>شماره همراه</h2>
        <div class="container" formArrayName="numbers" *ngFor="let number of numbers.controls; index as i">
            <ng-container class="field" [formGroupName]="i">
                <mat-form-field appearance="outline">
                    <mat-label>شماره همراه</mat-label>
                    <input type="tel" pattern="" matInput placeholder="09123456789" [formControlName]="numberFieldName" matTooltip="شماره همراه" autocomplete="on">
                </mat-form-field>
                <button type="button" mat-raised-button color="primary" (click)="removeNumberField(i)" class="btn-delete">حذف</button>
            </ng-container>
        </div>
        <div><button type="button" mat-raised-button color="primary" (click)="addNumberField()">اضافه کردن</button></div>
        <div><button class="action" type="submit" mat-raised-button color="primary" [disabled]="!emergencyNumberGroup.valid">تایید</button></div>
    </mat-card>
</form>

3. 修正Service层API路径语法 #

模板字符串拼接错误导致URL无效，移除多余逗号：

updateNumbers(number: PhoneNumbers): Observable<string> {
    return this.http.put<string>(`/napi/setting/numbers/${number.id}`, number);
}

4. 补充组件缺失的依赖与方法 #

• 导入并实现SnackBar功能：

import { MatSnackBar } from '@angular/material/snack-bar';

constructor(
    private formBuilder: FormBuilder,
    private setService: SettingService,
    private snackBar: MatSnackBar
) {
    this.phoneNumbers = [];
    this.link = ["/user-setting"];
    this.error$ = new BehaviorSubject("");
}

openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, { duration: 3000 });
}

• 初始化表单相关变量与方法：

numberFieldName = 'number'; // 需与PhoneNumbers接口字段匹配

ngOnInit(): void {
    this.emergencyNumberGroup = this.formBuilder.group({
        numbers: this.formBuilder.array([this.createNumberField()])
    });
}

createNumberField(): FormGroup {
    return this.formBuilder.group({
        [this.numberFieldName]: ['', Validators.required]
    });
}

get numbers(): FormArray {
    return this.emergencyNumberGroup.get('numbers') as FormArray;
}

addNumberField(): void {
    this.numbers.push(this.createNumberField());
}

removeNumberField(index: number): void {
    this.numbers.removeAt(index);
}

验证测试 #

1. 启动项目后填写号码，点击提交按钮
2. 检查控制台是否消除undefined错误
3. 确认API请求正常发送，SnackBar提示正确显示

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