如何将从webapi返回的自定义对象数组的HttpResponse响应分配给打字稿角度中相同数组类型的对象？

Posted 2023-03-13

【中文标题】如何将从webapi返回的自定义对象数组的HttpResponse响应分配给打字稿角度中相同数组类型的对象？

【英文标题】：How to assign an HttpResponse response of custom array of objects returned from webapi to an object of same array type in typescript angular?

【发布时间】：2022-01-21 04:45:48

【问题描述】：

我第一次在 VSCODE 中使用带有 angular 的 asp.net 核心，从事视频教程中的一个小项目。下面是我的组件打字稿文件 - index-actors.component.ts

    import  actorDTO  from './../actors.model';
import  ActorsService  from './../actors.service';
      import  Component, OnInit  from '@angular/core';
import  HttpResponse  from '@angular/common/http';

      @Component(
        selector: 'app-index-actors',
        templateUrl: './index-actors.component.html',
        styleUrls: ['./index-actors.component.css']
      )
      export class IndexActorsComponent implements OnInit 

        constructor(private actorService:ActorsService)  
        actors!: actorDTO[];
        colunsToDisplay=['name','actions'];
        totalAmountOfRecords: string | null | undefined;
        currentPage=1;
        pageSize=5;
        ngOnInit(): void 
          this.actorService.get().subscribe((response:HttpResponse<actorDTO[]>)=>
          this.actors=response.body;
          this.totalAmountOfRecords=response.headers.get("totalAmountOfRecords");
          );
        

        delete(id:number)

        

      

我在线路上遇到错误

this.actors=response.body;

错误提示

错误：键入 'actorDTO[] | null' 不能分配给类型 'actorDTO[]'。 类型“null”不能分配给类型“actorDTO[]”。 21 this.actors=response.body;

我似乎不知道如何解决这个问题。为什么可以将具有 actorDTO[] 数组的响应体直接分配给本身就是 actorDTO 数组的actor？

tsconfig.json

    /* To learn more about this file see: https://angular.io/config/tsconfig. */

  "compileOnSave": false,
  "compilerOptions": 
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  ,
  "angularCompilerOptions": 
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  

actors.services.ts

      import  observable, Observable  from 'rxjs';
  import  environment  from './../../environments/environment';
  import  HttpClient  from '@angular/common/http';
  import  actorCreationDTO, actorDTO  from './actors.model';
  import  Injectable  from '@angular/core';
  import  formatDateFormData  from '../utilities/utils';

  @Injectable(
    providedIn: 'root'
  )
  export class ActorsService 

    constructor(private http:HttpClient)  
    private apiURL=environment.apiURL+"/actors";

    get(): Observable<any>
    return this.http.get<actorDTO[]>(this.apiURL, observe:'response');
    
    create(actor: actorCreationDTO)
      const formData= this.buildFormData(actor);
      return this.http.post(this.apiURL,formData);
      
    private buildFormData(actor:actorCreationDTO) : FormData
      const formData=new FormData();
      formData.append('name',actor.name);
      if(actor.biography)
        formData.append('biography',actor.biography);
      
      if(actor.dateOfBirth)
        formData.append('dateOfBirth',formatDateFormData(actor.dateOfBirth));
      
      if(actor.picture)
        formData.append('picture',actor.picture);
      
  return formData;
    
  

【问题讨论】：

能否请您发布您的tsconfig.json 文件？

@Chaka15 完成...更新

在您的 tsconfig 中设置了严格类型。在你的组件中，如果你把actors!: actorDTO[] | null 错误应该消失。

【参考方案1】：

尝试删除strict: true，并在https://www.typescriptlang.org/tsconfig 阅读更多相关信息。这个选项strict 设置为false 迫使你在类中声明属性时输入!，老实说有时很烦人。 :)

还可以考虑将strictNullCheks: false 添加到您的tsconfig.json。

更多可能有用的选项是this.actors = response.body || [];

【参考方案2】：

在您的 tsconfig 中，默认设置了严格类型。如果您查看 HttpResponse 的 Angular 文档，body 的类型是 T | null。所以响应正文可能是actorDTO[] | null。

由于设置了严格类型，您需要考虑响应正文中潜在的 null 情况。

选项 1

输入你的actors属性来说明null。

// IndexActorComponent
actors!: actorDTO[] | null;

选项 2

如果响应正文为空，请使用|| 分配一个空数组。通过这种用法可以让你的演员输入为actors!: actorDTO[]。

this.actors = response?.body || [];

https://angular.io/api/common/http/HttpResponse https://angular.io/guide/strict-mode https://indepth.dev/posts/1402/bulletproof-angular

【讨论】：

我也是打字新手。开发环境中通常的标准值严格类型是什么？应该将其删除还是设置为 false？

因为 Angular 11 strict 在所有新项目上默认启用。严格模式为您的项目添加了额外的类型安全功能。如果您想使用它，这是个人选择。我相信建议保持启用但不是强制性的。检查我的编辑以获取有关严格模式的几篇文章的链接。