我第一次在 VSCODE 中使用帶有 angular 的 asp.net core，正在處理視頻教程中的一個小專案。下面是我的組件打字稿檔案 - 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？
組態檔
/* 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
}
}
actor.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;
}
}
uj5u.com熱心網友回復：
嘗試洗掉strict: true，請在https://www.typescriptlang.org/tsconfig閱讀更多相關資訊。這個strict設定為的選項false會強制您!在類中宣告屬性時放置，說實話有時很煩人。:)
還可以考慮添加strictNullCheks: false到您的tsconfig.json.
更多可能有用的選項是這個 this.actors = response.body || [];
uj5u.com熱心網友回復：
在您的 tsconfig 中，默認設定了嚴格型別。如果您查看 Angular 檔案，HttpResponse了解bodyis的型別T | null。所以回應主體可能是actorDTO[] | null.
由于設定了嚴格型別，您需要考慮回應正文中潛在的空情況。
選項1
鍵入要說明的演員屬性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
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/386097.html