TS2339：类型“{}”上不存在属性“文本”答案

【问题标题】：TS2339: Property 'text' does not exist on type '{}'TS2339：类型“{}”上不存在属性“文本”
【发布时间】：2021-06-18 05:32:03
【问题描述】：

我实际上面临这条线问题：- <input [(ngModel)]="question.text" name="question" matInput placeholder="Question">here .text 扩展名问题。这里我使用了 Angular11。这是我的代码。

问题.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);
    }
}

当我运行我的应用程序时，我发现了这些错误：-

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.

我该如何解决这个问题？

【问题讨论】：

question = {} 你没有给它一个类型，所以编译器不知道它有一个文本属性。 Typescript 不是 Javascript。只需将该属性初始化为一个空字符串或任何它应该是的。

标签： angular typescript angular-material angular11

【解决方案1】：

问题

当您创建对象question = {} 时，Typescript 将类型推断为{} 一个没有属性的对象。如果你尝试访问任何属性，它会抛出一个错误

解决方案

设置对象的类型

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

或者更好地声明一个接口

interface IQuestion {
  text?: string;
}

...
question: IQuestion = {}

【讨论】：

【解决方案2】：

您应该将question 对象的类型更改为任意

question: any = {};

或者

创建接口：

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

然后将问题类型设置为Question

question: Question = {}

这是一个有效的example

【讨论】：

【解决方案3】：

这是因为您的对象“问题”中没有任何键名称“文本” 您可以在对象中添加一个名为“text”的键，也可以为对象“question”提供类型定义。如下所示：

interface Iobject {
    text: string;
}

question: Iobject;

这样做你的错误就会消失。

【讨论】：

【解决方案4】：

这有助于任何：

let a : any = {};

【讨论】：

【解决方案5】：

您必须声明以“问题”命名的属性的类型。你可以试试关注，

question:any = {};

这是最近更新版本的打字稿严格类型检查问题。如果您使用的是 Angular，那么您可以通过这种方式轻松关闭这种严格的类型检查，Turn off strict type checking in Angular

【讨论】：