Identifiant 'n' non défini, 'objet' ne contient pas un tel membre

Question

Visual Studio Code (1.17.0) génère des erreurs dans Angular modèles lorsque j'adresse des membres de types hérités qui ne sont pas sur la classe de base et la classe de base est déclaré sur le composant.
Dans le code ci-dessous, évidemment, maxLength n'existe pas sur QuestionBase, mais comment puis-je faire?

[Angulaire] L'identificateur 'maxLength' n'est pas défini. 'QuestionBase' ne contient pas un tel membre

export class QuestionBase { 
 
    id: number; 
 
    order: number; 
 
} 
 

 
export class TextQuestion extends QuestionBase { 
 
    maxLength: number 
 
}

Sur la question composante est déclarée comme QuestionBase, de sorte qu'il peut devenir une sorte de question

@Import question: QuestionBase

maintenant dans le modèle html j'addres la propriété maxLength:

<input type="text" class="form-control" id="maxLength" [(ngModel)]="question.maxLength" name="maxLength" /> 

Answer 1

Essayez comme ceci:

QuestionBase.ts

export class QuestionBase { 
    id: number; 
    order: number; 
} 

export class TextQuestion extends QuestionBase { 
    maxLength: number 
} 

component.ts

import { QuestionBase } from './'; 

export class Component { 

    private question: QuestionBase = new QuestionBase(); 

    constructor() { } 
} 

component.html

<input type="text" class="form-control" id="maxLength" [(ngModel)]="question.maxLength" name="maxLength" /> 

Answer 2

nous avons résolu le problème en créant un composant séparé pour chaque chiffre questiontype. Sur chaque contrôleur, vous pouvez ensuite spécifier le type de question à l'adresse @Input().

<div [ngSwitch]="question.type"> 
    <app-text-question *ngSwitchCase="'text'" [question]="question"></app-text-question> 
    <app-checkbox-question *ngSwitchCase="'checkbox'" [question]="question"></app-checkbox-question> 
</div> 

TextQuestion

import { Component, OnInit, Input } from '@angular/core'; 
import { TextQuestion } from '../../_model/text-question'; 
@Component({ 
    selector: 'app-text-question', 
    templateUrl: './text-question.component.html', 
    styleUrls: ['./text-question.component.css'] 
}) 
export class TextQuestionComponent implements OnInit { 
@Input() question: TextQuestion ; 

constructor() { 
} 

ngOnInit() { 

Et même pour la CheckboxQuestion:

import { Component, OnInit, Input } from '@angular/core'; 
import { CheckboxQuestion } from '../../_model/checkbox-question'; 

@Component({ 
    selector: 'app-checkbox-question', 
    templateUrl: './checkbox-question.component.html', 
    styleUrls: ['./checkbox-question.component.css'] 
}) 
export class CheckboxQuestionComponent implements OnInit { 
@Input() question: CheckboxQuestion 
    constructor() { } 

    ngOnInit() { 
    } 

}