我有一個L2Language具有三個屬性的物件：short、long和videos。它在子組件中按預期作業，現在我試圖通過事件發射器將物件從子組件傳遞到父組件：
(L2LanguageEvent)="L2LanguageEventHandler($event)"
該物件正在傳遞給父級。當我在控制臺中查看具有console.table(L2LanguageEvent);屬性的物件時：
但是當我在物件上記錄一個屬性時，console.log(L2LanguageEvent.short);我被告知該屬性不在物件上：
Property 'short' does not exist on type 'object'.
這是我的父組件：
import { Component, OnInit } from '@angular/core';
import { L2Language } from './home-toolbar/home-toolbar.component';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
language: L2Language;
ngOnInit(): void {
console.log(this.language); // doesn't work
}
L2LanguageEventHandler(L2LanguageEvent: object) {
console.table(L2LanguageEvent); // works, you see the result above
console.log(L2LanguageEvent.short); // doesn't work
console.log(L2LanguageEvent['short']); // doesn't work
this.language = L2LanguageEvent; // doesn't work
}
}
console.log(this.language);回傳undefined。這表明該介面L2Language從未被匯入。我沒有收到錯誤Cannot find module，所以這不是路徑問題。或者可能是說L2Language已匯入但屬性值未定義？這是真的，但它不應該導致指出該屬性在物件上不存在的錯誤。
console.log(L2LanguageEvent.short);回傳錯誤Property 'short' does not exist on type 'object'.
console.log(L2LanguageEvent['short']);回傳兩個錯誤：
Element implicitly has an 'any' type because expression of type '"short"' can't be used to index type '{}'.
Property 'short' does not exist on type '{}'.
this.language = L2LanguageEvent;回傳錯誤
Type '{}' is missing the following properties from type 'L2Language': short, long, videos
謝謝你的幫助。
uj5u.com熱心網友回復：
問題在于這部分代碼
L2LanguageEventHandler(L2LanguageEvent: object) { //CHANGE THIS object
console.table(L2LanguageEvent); // works, you see the result above
console.log(L2LanguageEvent.short); // doesn't work
console.log(L2LanguageEvent['short']); // doesn't work
this.language = L2LanguageEvent; // doesn't work
}
而不是物件，只需使用您的界面。
L2LanguageEventHandler(L2LanguageEvent: L2Language){}
uj5u.com熱心網友回復：
我犯了兩個錯誤。首先，在我寫的子組件中：
export interface L2Language = {
short: string;
long: string;
videos: string;
};
export class HomeToolbarComponent implements OnInit {
@Output() L2LanguageEvent = new EventEmitter<object>();
}
這是對的：
export interface L2Language = {
short: string;
long: string;
videos: string;
};
export class HomeToolbarComponent implements OnInit {
@Output() L2LanguageEvent = new EventEmitter<L2Language>();
其次，在父組件中這是不正確的：
L2LanguageEventHandler(L2LanguageEvent: object) {
console.table(L2LanguageEvent);
console.log(L2LanguageEvent.short);
}
這是對的：
L2LanguageEventHandler(L2LanguageEvent: L2Language) {
console.table(L2LanguageEvent);
console.log(L2LanguageEvent.short);
}
重讀TypeScript Handbook，我發現那object不是型別。你制作一個物件，給它一個名字，然后型別就是名字。事實上，我可以讓我的物件 atype而不是 a interface：
export type L2Language = {
short: string;
long: string;
videos: string;
};
請注意，現在里面有一個=！TypeScript 手冊解釋說
the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.
你不必命名一個物件，你可以匿名。這對于它在一個函式中使用的物件可能有好處，但對于在組件之間傳遞的物件，它應該是命名的typeor interface。
謝謝丹尼爾！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/447486.html