Question

我想在Angular中将字符串映射到对象（可能与JAVA相同）。

json字符串：{"policyNumber":"1234", "firstName":"archi"}

Typescript对象：

export class ComplainDto {
  policyNumber: string;
  firstName: string;
  lastName: string;
  businessUnit: string     
}

在我的TS中，我确实关注了

export class LodgeComplainComponent {

  complainDto: ComplainDto;


  constructor(private activatedRoute: ActivatedRoute) {
    this.complainDto = new ComplainDto();

  }

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      console.log("params - "+params["complainData"]);
      if (params["complainData"] != '' && params['complainData'] != 'undefined') {
        this.complainDto = JSON.parse(params["complainData"]);
      }
      for (var key in this.complainDto) {
            console.log(key);
      }
    });
  }


}

complainDTO对象只有两个属性（policyNumber和FirstName）我想要（policyNumber，firstName，lastName，businessUnit）是抱怨DTO的属性。因为我没有传递姓氏和业务单位，因为两者的值都应该为null或为空

我该怎么做，以使字段不显示姓氏和业务单位“未定义”

  <div>
    <mat-form-field>
      <div>
      <mat-label>Policy Number</mat-label>
      <input matInput  [value]="complainDto.policyNumber"/>
      </div>
    </mat-form-field>
  </div>

  <div>
    <mat-form-field>
      <mat-label>First Name</mat-label>
      <input matInput [value]="complainDto.firstName"/>
    </mat-form-field>
  </div>

  <div>
    <mat-form-field>
      <mat-label>Last Name</mat-label>
      <input matInput  [value]="complainDto.lastName"/>
    </mat-form-field>
  </div>

  <div>
     <mat-form-field>
       <mat-label>Business Unit</mat-label>
       <input matInput  [value]="complainDto.businessUnit"/>
     </mat-form-field>
   </div>

控制台日志显示

没有创建其他对象属性，如lastName，businessUnit

Answer 1

使用可选的运算符

[value]="complainDto?.lastName"

Answer 2

在ComplainDTO上设置属性值之前，它们是不确定的。您可以使用以下所有空属性初始化complainDto：

complainDto: ComplainDto = {
  firstName: '',
  lastName: '',
  policyNumber: '',
  businessUnit: ''
};

但是，解析后的参数的分配将覆盖初始化，并且lastName和businessUnit属性再次未定义。在将参数分配给null或''之后，需要将它们手动分配给它们。

if (params["complainData"] != '' && params['complainData'] != 'undefined') {
  this.complainDto = JSON.parse(params["complainData"]);
  this.complainDto.lastName = '';
  this.complainDto.businessUnit = '';
}

如果不需要绑定到[value]，则可以将complainDto绑定到[(ngModel)]，而无需使用安全的导航操作符（？）。这些属性仍未定义，但是直到用户输入内容后，输入中才会显示任何值。

<div>
  <input [(ngModel)]="complainDto.policyNumber"/>
</div>

<div>
  <input [(ngModel)]="complainDto.firstName"/>
</div>

<div>
  <input [(ngModel)]="complainDto.lastName"/>
</div>

<div>
  <input [(ngModel)]="complainDto.businessUnit"/>
</div>

<!-- Changes to the complain dto -->
<div>
  <pre>{{ complainDto | json }}</pre>
</div>

最初，firstName管道中仅显示policyNumber和json属性。但是一旦用户开始输入，就会添加其他属性并为其分配一个值。

这里是指向StackBlitz的链接，显示了complainDto在控制台中被覆盖，以及与[(ngModel)]的双向绑定如何工作。

在Angular中将字符串映射到对象

2 个答案: