關於在HTML中取得物件繼承後之屬性值問題

General
1

=>field-base.ts
export class FieldBase {
value: T;
key: string;
label: string;
required: boolean;
pattern: string;
order: number;
controlType: string;
constructor(options: {
value?: T,
key?: string,
label?: string,
required?: boolean,
pattern?: string,
order?: number,
controlType?: string
} = {}) {
this.value = options.value;
this.key = options.key || ‘’;
this.label = options.label || ‘’;
this.required = options.required;
this.pattern = options.pattern || ‘’;
this.order = options.order === undefined ? 1 : options.order;
this.controlType = options.controlType || ‘’;
}
}

=>field-radio.ts
import { FieldBase } from ‘./field-base’;

export class FieldRadio extends FieldBase {
controlType = ‘radio’;
type: string;
items: { name: string, value: string}[] = [];
constructor(options: any) {
super(options);
this.items = options.items || [];
this.type = ‘radio’;
}
}
在範例裡的 Component裡ts檔裡，有
@Input() field: FieldBase<any>;

而在HTML裡的存取，關於field.items這些非FieldBase屬性。同樣程式碼在我自己建置專案會出現錯誤，如items not defind…而範例卻不會，範例的angular/core是5.0.0，我的是9.1.7。
不太了解的是依一般繼承本來FieldBase就不可能讀取到radio的屬性。請問這部份該如何修改或是我自己那邊用錯了嗎?

{{item.name}}

因為整個範例滿多東西我也不好全貼上，我所說作動的HTML網址如下:

2

要不要把 stackbliz 將你的問題重現出來呢

3

PS:沒實際用過stackblitz，不知道這樣用對不對，先這樣試試，我再繼續看一下這個東西的教學…

因為整個範例滿多的~~我就複製困擾的那個部份，在我電腦上編輯時，會出現如下圖片的錯誤，正常field是宣告成FieldBase<any>，這樣在html裡是也可以真的依是那種controlType而取得實際繼承物件的額外屬性嗎?

questionnaire
questionnaire1768×621 99.6 KB

4

這個錯誤提示是 Angular Language Serviec 在開發時期認為 FieldBase 內並沒有這些 items 或是 options 的屬性，其實是因為 FieldBase 內本來就沒有設定，那是其他類似 FieldRadio 這一類的 class 中才有定義
這是關於此問題的 Issue, 尚未解決

所以目前如果要他不要顯示紅色，就要使用 any type,

@Input() field: any;
5

感謝Kevin大，想請問一下，因為依般繼承的概念，我真的無法理解可以這樣使用，請問這在angular 這類前端是會跳脫這種基本概念想法的嗎?

PS:它原專案使用的angular/core是5.0.0，Visual studio code就沒看到有提醒…

6

我倒不覺得這個有跳脫基本概念，這有點像 pattern match 的概念，在 TypeScript 裡面當一個聯集型別的時候，可以做出這樣的型別推導
(https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html)

目前只是 Ivy 的 language service 沒有做到完整分析，這段邏輯改寫成 TypeScript 是不會出現錯誤訊息的

1個讚