将 null 分配给角度 4 中的接口答案

【问题标题】：Assign null to interface in angular 4将 null 分配给角度 4 中的接口
【发布时间】：2018-10-03 04:53:00
【问题描述】：

我在angular4中有一个接口

interface StatusDetail {
    statusName: string,
    name: string
}

我已经为它分配了一些值，比如

//角度组件

     export class EditComponent implements OnInit{
         statusDetail: StatusDetail;
         ngOnInit() {
           this.statusDetail.statusName = 'text Status';
           this.statusDetail.name= 'text Name';
         }
     }

我正在尝试像这样重置为默认 null

         SetNull() { 
           this.statusDetail = null
         }

但它给出了错误

类型 null 不能分配给类型 StatusDetail

我该怎么做？

【问题讨论】：

标签： angular typescript interface

【解决方案1】：

您需要将statusDetail 声明为StatusDetail | null：

export class EditComponent implements OnInit{
     statusDetail: StatusDetail | null;
     ngOnInit() {
       this.statusDetail.statusName = 'text Status';
       this.statusDetail.name= 'text Name';
     }
 }

【讨论】：

那么有接口有什么意义呢？用空字段定义默认的 StatusDetail 不是更有意义吗？
我不能这样做，因为每次我尝试访问它的值时，它都会给出空值错误
@bugs：我同意，这样会更好。
@Faisal：嗯，这就是 null 的本质。不确定您要在这里实现什么目标？你为什么将它设置为null？另外，请参阅错误评论。
我在 html 上有一个条件
Status is Not Null
我想通过这个条件隐藏它

【解决方案2】：

鉴于您使用这些属性定义了接口，将null 分配给您的对象没有太大意义。

如果您尝试重置默认值，为什么不将它们设置为空？

SetNull() { 
  this.statusDetail = {
    statusName: '',
    name: ''
  }
}

如果你想在 HTML 中检查这个条件，你可以专门为此创建一个新的私有方法：

isStatusDetailDefined(): boolean {
  return this.statusDetail.statusName && this.statusDetail.name
}

和

*ngIf="isStatusDetailDefined()"

【讨论】：

但是这个条件永远不会出错 ngIf !="statusDetail != null"
因为条件没有意义，给定接口。查看修改后的答案

【解决方案3】：

如果要将null设置为接口值，请设置{} as any

setNull(){
 this.statusDetail= {} as any
}

【讨论】：

【解决方案4】：

您可以像下面这样重置/启动您的界面。

this.statusDetail = <StatusDetail>{};

现在对象将具有默认值。您也可以设置为 undefined ，为什么为 null btw ？为什么不

this.statusDetail = undefined ;

【讨论】：