TS2339: Property 'text' does not exist on type '{}'

Admin 1
Viewed 16567

I am actually facing this line problem :- <input [(ngModel)]="question.text" name="question" matInput placeholder="Question">here .text extension make problem. Here I used Angular11. here is my code.

Question.component.html

<mat-card >

<mat-card-content>

<form>
   
    <mat-form-field>
      <mat-label>Question</mat-label>
      <input [(ngModel)]="question.text" name="question" matInput placeholder="Question">
    </mat-form-field>
  
  </form>
</mat-card-content>


<mat-card-actions>
    <button (click)="post(question)" mat-button>POST</button>
</mat-card-actions>


</mat-card>

question.component.ts

import {Component} from '@angular/core'
import {ApiService} from './api.service'

@Component({

   selector:'question',
   templateUrl:'./question.component.html'

})

export class QuestionComponent{

    question = {}

    constructor(private api:ApiService){}

    post(question)
    {
        this.api.postQuestion(question);
    }
}

when i run my application.then i found these error:-

src/app/question.component.ts:7:16
    7    templateUrl:'./question.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component QuestionComponent.


Error: src/app/question.component.html:9:36 - error TS2339: Property 'text' does not exist on type '{}'.

9       <input [(ngModel)]="question.text" name="question" matInput placeholder="Question">
                                     ~~~~

  src/app/question.component.ts:7:16
    7    templateUrl:'./question.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component QuestionComponent.

How I resolve this issue?

angular11 angular-material angular typescript
6 Answers

Problem

when you create an object question = {} Typescript infers the type as {} an object without properties. If you try to access any property, it will throw an error

Solution

Set the type of the object

question: { text?: string; } = {}

Or even better declare an interface

interface IQuestion {
  text?: string;
}

...
question: IQuestion = {}
user_136801150

You have to declare the type of the property named after 'question'. You can try following,

question:any = {};

It's a typescript strict type checking issue of recent update version. If you are using Angular then you can easily turn off this strict type checking by this way, Turn off strict type checking in Angular

user_40729270

You should change the type of question object to any

question: any = {};

Or

Create an interface :

    interface Question {
       text?: string;
       // other properties if you have ones
    }

And then set the type of question to Question

question: Question = {}

here is a working example

user_75417720

It is because you do not have any keys name "text" in your object "question" You can either add one key named "text" in the object or you can provide type definition to you object "question" . something like below:

interface Iobject {
    text: string;
}

question: Iobject;

By doing this your error will be gone.

user_127854360

This helps with any:

let a : any = {};
user_125633350

Property 'option' does not exist on type '{}'.ts(2339) If you are using Vue add

"vueCompilerOptions": {
        "target": 2
    },

In your tsconfig.json

user_128166430
Related