Блог

Ссылка На Полный Пример: https://www.truecodex.com/course/angular-6/angular-6-get-and-post-request-http-client

Подробная информация об Ошибке

ошибка TS2339: Свойство «описание» не существует для типа «Блогпост».

<имя области текста=»описание» идентификатор=»описание» [(ngModel)]=»запись в блоге.описание» строки=»8″>

Компонент блогов

 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
      );
  }
}
 

blogs.component.html

 <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>amp;nbsp;</label>
          <button type="submit" [disabled]="!postForm.form.valid">Add Post</button>
        </div>
      </form>
    </div>
  {{error}}
</div>
 

Блог.ts

 export class Blogpost {
    constructor(
        id: number,
        title: string,
        description: string,
        author: string
      ) {}
}
 

Вам необходимо добавить ключевое слово public для каждого из параметров конструктора, к которому вы хотите получить доступ в качестве свойства.

     export class Blogpost {
        constructor(
            public id: number,
            public title: string,
            public description: string,
            public author: string
          ) {}
    }
 

Вот полезная ссылка, по которой вы можете начать, если хотите изучить назначение конструктора машинописи подробнее