Angular 类型“从不”上不存在属性“内容”

Question

So the code is simple, I have a component where I want to render information (if exists) and I get the error when the component does not exist.

So the post-list.component.html looks like this:

  <mat-expansion-panel *ngFor="let post of posts">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{ post.title }}
      </mat-panel-title>
      <!-- <mat-panel-description>
        {{post.description}}
      </mat-panel-description> -->
    </mat-expansion-panel-header>
    <p>{{ post.content }}</p>
  </mat-expansion-panel>
</mat-accordion>
<p *ngIf="posts.length >= 0">No posts added yet</p>

And the post-list.components.ts looks like this>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css'],
})
export class PostListComponent implements OnInit {
  constructor() {}

  posts = [];

  ngOnInit(): void {}
}

I get this error: Error image

Answer 1

You don't have defined a type for your posts property. When you just do

export class PostListComponent implements OnInit {
  ...
  posts = [];
  ...
}

typescript deduces the type for the posts property from its value [] . And from an empty array without any typing information it decuces never[] , thus it assumes the following

export class PostListComponent implements OnInit {
  ...
  posts: never[] = [];
  ...
}

To fix this, define a type for your posts property like

export interface IPost {
  title: string;
  content: string;
  ...
}

export class PostListComponent implements OnInit {
  ...
  posts: IPost[] = [];
  ...
}

Thus, typescript will deduce the correct type.

Answer 2

You just have to properly type your posts property:

interface Post {
  title:string;
  content: string;
}


export class PostListComponent {
  posts: Post[] = []; // <-- proper typings
}

Answer 3

In VS code just giving the error, because typescript is validating the types, there is no type is defined in the angular code itself.

ideally, you can define the post type somewhere out of the PostListComponent class

export interface Post {
 title: string;
 content: string;
}

In your PostListComponent define the type like this

posts: Post[] = [];