属性 'description' 在 Angular 11 中不存在相关错误

Question

完整示例 Link：https://www.truecodex.com/course/angular-6/angular-6-get-and-post-request-http-client

错误详情

错误 TS2339：属性 'description' 在类型 'Blogpost' 上不存在。

</p> <p><strong>博客组件</strong></p> <pre><code>import { Component, OnInit } from '@angular/core'; import { BlogsService } from '../blogs.service'; import { Blogpost } from '../blogpost'; @Component({ selector: 'app-blogs', templateUrl: './blogs.component.html', styleUrls: ['./blogs.component.css'] }) export class BlogsComponent implements OnInit { posts: Blogpost[]; blogpost = new Blogpost(); error: string; showPostForm = false; constructor(private blogservice: BlogsService) { } ngOnInit() { this.blogservice.getBlogPosts().subscribe( (data: Blogpost[]) => this.posts = data, error => this.error = error ); } onSubmit() { this.showPostForm = false; return this.blogservice.createPost(this.blogpost).subscribe( data => this.posts.push(data), error => this.error = error ); } } </code></pre> <p><strong>blogs.component.html</strong></p> <pre><code><div class="container"> <div class="blogs" [hidden]="showPostForm"> <div class="content-top"> <div class="blog-heading"> <h1>Blogs</h1> </div> <div class="blog-create-btn"> <button (click)="showPostForm=true;postForm.reset()">Create Post</button> </div> </div> <div *ngFor="let post of posts" class="posts"> <h2 class="post-title">{{post.title}}</h2> <div class="post-date"> <span>Author: {{post.author}}</span><br /> Posted On: {{post.created_at | date:'medium'}} </div> <div class="post-desc">{{post.description}}</div> </div> </div> <div class="post-form" [hidden]="!showPostform"> <h2>Create Post</h2> <form (ngSubmit)="onSubmit()" #postForm="ngForm"> <div class="form-group"> <label for="title">Title: </label> <input type="text" name="title" id="title" [(ngModel)]="blogpost.title" required> </div> <div class="form-group"> <label for="author">Author: </label> <input type="text" name="author" id="author" [(ngModel)]="blogpost.author" required> </div> <div class="form-group"> <label for="description">Description: </label> <textarea name="description" id="description" [(ngModel)]="blogpost.description" rows="8"></textarea> </div> <div class="form-group"> <label>&nbsp;</label> <button type="submit" [disabled]="!postForm.form.valid">Add Post</button> </div> </form> </div> {{error}} </div> </code></pre> <p><strong>Blog.ts</strong></p> <pre><code>export class Blogpost { constructor( id: number, title: string, description: string, author: string ) {} } </code></pre> </section> <div> <section class="answer"> <p>您需要为每个要作为 属性 访问的构造函数参数添加一个 public 关键字。</p> <pre><code> export class Blogpost { constructor( public id: number, public title: string, public description: string, public author: string ) {} } </code></pre> <p>这是一个有用的 link 如果您想探索更多内容，可以帮助您入门 <a href="https://kendaleiv.com/typescript-constructor-assignment-public-and-private-keywords/" rel="nofollow noreferrer">Typescript constructor assignement</a></p> </section> </div> </div> <div class="line"></div> <div id="footer">©2023 WhoseBug</div> </body> </html>