CODEWITHSUNDEEP
angulartypescriptangular-materialangular11
user14344635
user14344635

Reputation:

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

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?

Upvotes: 3

Views: 36854

Answers (6)

Clinton Davis
Clinton Davis

Reputation: 21

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

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

In your tsconfig.json

Upvotes: 1

Sourav Das
Sourav Das

Reputation: 737

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

Upvotes: 4

Sachini Witharana
Sachini Witharana

Reputation: 116

This helps with any:

let a : any = {};

Upvotes: 0

Ismail Dinar
Ismail Dinar

Reputation: 426

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

Upvotes: 1

Mr.UV
Mr.UV

Reputation: 100

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.

Upvotes: 0

Owen Kelvin
Owen Kelvin

Reputation: 15083

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 = {}

Upvotes: 2

Related Questions