复制后无法检索对象属性答案

【问题标题】：Can't retrieve object properties after copying复制后无法检索对象属性
【发布时间】：2018-01-18 18:33:59
【问题描述】：

我正在尝试以角度将数据从一个组件传递到另一个组件，第二个组件显示为材质对话框。在传递对象之前，它的行为符合预期，但是当我传递它时，除了第一个属性之外，我失去了对所有内容的访问权限。

及格班：

displayDetail(i) {
     let dialogRef = this.dialog.open(PartDetailComponent, {
     width: '90%',
     data: { part: this.partList.find(x => x.partNumber = i) , id: i }
   });

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

接收类

constructor(public dialogRef: MatDialogRef<PartDetailComponent>,
    @Inject(MAT_DIALOG_DATA) public data: Part) {
    if (data == undefined) {
      console.log("Bad data.  Closing modal.")
    }
    else {
      this.part = data;
      console.log(data);  // object now only has id
      console.log(this.part); // identical to data
      console.log(this.part.id); // displays id
      console.log(this.part.description); // undefined
      console.log(data.description); // undefined
    }
}

我是 Angular 的新手，并且有点像打字稿的新手，但这似乎不应该发生。到底是怎么回事？

编辑：如果 Part 类是相关的：

export class Part {
  id: number; // assuming there's an ID unique of partNumber or sku
  title: string;
  partNumber: number;
  description: string;
  leadTime: number; 
  weight: number;
  sku: number;
  pictureUrl: string;
  inventory: number;
  inStock: boolean;
  isOrderable: boolean;
  instructions: string;
}

【问题讨论】：

data.part.description 呢？
无法识别 data.part 存在，因为我明确告诉它期望一个 part 对象而不是具有 part 属性的对象。看我的回答

标签： typescript angular-material2 angular5

【解决方案1】：

记录这一点，因为我觉得关于角度问题的文档太少了，这是一个有趣的陷阱。

冲突发生在我传递的对象类型和接收的对象类型之间。

我正在发送：

data: { part: this.partList.find(x => x.partNumber = i) , id: i }

这显然是一个包含零件和 id 的对象。

我正在尝试接收零件：

constructor(public dialogRef: MatDialogRef<PartDetailComponent>,
@Inject(MAT_DIALOG_DATA) public data: Part) {

因此，当我将接收对象更改为 any 时，我就能够访问 data.part 并正确使用它。

constructor(public dialogRef: MatDialogRef<PartDetailComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {

这更像是一个转译陷阱，因为没有组件间类型检查（就像在大多数情况下在像 C# 这样的编译语言中那样）。转译器不检查，也不关心相互连接的组件是否传递了“错误”类型的数据，而 javascript 只是用它接收到的数据做它可以做的事情。

【讨论】：