Angular NgModel绑定无法读取未定义的属性

Question

所以我试图从我拥有的项目数组中编辑一个项目，但我不知道如何绑定NgModel此外，它正在通过"材质对话框"窗口进行编辑。这是我正在使用的TS文件：

import { Component, OnInit , Inject , Input } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { StorageItem } from '../../StorageItem';
import { ItemsService } from '../items.service';
import { Items } from '../../MockItems';
import { Observable, Subject } from 'rxjs';
export interface DialogData {
Unit: string;
Name: string;
Amount: number;
}
@Component({
selector: 'app-dialog-window',
templateUrl: './dialog-window.component.html',
styleUrls: ['./dialog-window.component.css']
})
export class DialogWindowComponent implements OnInit {
Unit: string;
Name: string;
Amount: number;
selected: StorageItem;
constructor(public dialog: MatDialog , public itemsService: ItemsService) {}
openDialog(hero: StorageItem): void {
this.selected = hero;
console.log(this.selected.Name);
const dialogRef = this.dialog.open(DialogComponent, {
width: '250px',
data: {Unit: this.Unit, Amount: this.Amount, Name: this.Name}
});
dialogRef.afterClosed().subscribe(Unit => {
console.log('The dialog was closed');
this.Unit = Unit;
});
}
ngOnInit(): void {}
}

@Component({
selector: 'app-dialog',
templateUrl: 'DialogEdit.html',
})
export class DialogComponent {
$Items: StorageItem;
constructor(
public dialogRef: MatDialogRef<DialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) {
}
onNoClick(): void {
this.dialogRef.close();
}

}

Html带有打开对话框的按钮：

<li>
<button mat-raised-button (click)="openDialog()">Edit Item</button>
</li>

对话框内部的Html:

<div mat-dialog-content>
<p>Name</p>
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput [(ngModel)]="Items.Name">
</mat-form-field>
</div>

我不知道它是否应该是项目。名称我只是举个例子。

阵列看起来像这样：

import { StorageItem } from './StorageItem';
export const Items: StorageItem[] = [
{ Quantity: 11, Name: 'Sand', Unit: 'kg'},
{ Quantity: 6, Name: 'Lamps', Unit:  'pcs'},
{ Quantity: 18, Name: 'Rocks', Unit: 'kg'},
{ Quantity: 2, Name: 'Tables', Unit:  'pcs'},
{ Quantity: 2, Name: 'Water', Unit:  'l'},
{ Quantity: 200, Name: 'Rope', Unit:  'm'},
];

StorageItem接口如下所示：

export interface StorageItem {
Name: string;
Quantity: number;
Unit: string;
}

所以我想要实现的是打开对话框窗口并输入名称，这样我就可以更改它并关闭对话框。此外，如果它只用于会话，我不需要在文件中更改它，也没关系。在我重新加载后，它可以返回到默认值。如果我放数据。单元它会起作用，但这不是我想将它绑定到项目名称并更改的重点。有一个表genrated let StorageItem of Items加上按钮，所以每个对象旁边都有按钮

我试着和英雄之旅中的做同样的事情

selected: StorageItem
funcionOnclickToOpenDialog(storageItem: StorageItem){
this.selected = storageItem;
}

但这也没用。

如果有什么遗漏，或者你想让我澄清，我很乐意帮忙。

Answer 1

您编辑的是名称，而不是单位：(

dialogRef.afterClosed().subscribe(Unit => {
console.log('The dialog was closed');
this.Unit = Unit;
});

您应该将上面的更改为：

dialogRef.afterClosed().subscribe(name => {
console.log('The dialog was closed');
this.Name = name;
});

Answer 2

Items应该是一个类变量，以便在模板中使用。我在这里看到了Items是用const声明的。它应该像

Items: StorageItem[] = [
{ Quantity: 11, Name: 'Sand', Unit: 'kg'},
{ Quantity: 6, Name: 'Lamps', Unit:  'pcs'},
{ Quantity: 18, Name: 'Rocks', Unit: 'kg'},
{ Quantity: 2, Name: 'Tables', Unit:  'pcs'},
{ Quantity: 2, Name: 'Water', Unit:  'l'},
{ Quantity: 200, Name: 'Rope', Unit:  'm'},
];

Answer 3

问题出在我的html中，当使用ng容器时，表单开始变得古怪。现在，当我递归地生成我的html时，这个解决方案有效：

<ng-template #formCategoryTemplate let-formCategory>
<div [formGroup]="getFormGroup(formCategory)" class="request-form">
</ng-container>
<tr class="input" *ngIf="isInput(formEntry)">
<td>
<mat-form-field appearance="outline" class="full-width">
<input [formControl]="getFormControl(toInput(formEntry))" matInput>
</mat-form-field>
</td>
</tr>
</ng-container>
</div>
</ng-template>

toIput只接受条目和return entry as InputEntry

getFormGroup将仅return myFormGroup