Angular 2 错误 TS2339：属性 'posts' 在类型 'BookComponent' 上不存在

Question

我正在学习 Angular 2，目前被以下错误阻止。变量 posts 在 post.component.ts.

中声明

Error: src/app/book.component.html:231:33 - error TS2339: Property 'posts' does not exist on type 'BookComponent'.

231         <li *ngFor="let post of posts">
                                    ~~~~~

  src/app/book.component.ts:9:18
    9     templateUrl: 'book.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component BookComponent.

以下是相关组件：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BookComponent } from './book.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CustomPipe } from './custom.pipe';
import { ForEmailDirective } from './for-email.directive';
import { PostComponent } from './post/post.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    BookComponent,
    CustomPipe,
    ForEmailDirective,
    PostComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [BookComponent]
})
export class AppModule { }

post.component.ts

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

@Component({
  selector: 'post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})
export class PostComponent {

  posts;
  constructor(private http:HttpClient) { 
    http.get('https://jsonplaceholder.typicode.com/posts')
      .subscribe(response=>{
        //console.log(response);
        this.posts=response;
      })
  }
}

book.component.ts - 不确定问题是否出在这里。我试图在此处导入 post.component.ts，但未使用，似乎是在更高级别完成的

import { Component } from '@angular/core';
import { FormControl, FormGroup, NgForm, Validators } from '@angular/forms';
import { ImageValidator } from './image.validator';

@Component({
    selector: 'app-book',
    templateUrl: 'book.component.html',
    styleUrls: ['book.component.css'],
})

// Reactive Form
export class BookComponent {
    bookForm=new FormGroup({
        name:new FormControl('', [Validators.required, Validators.minLength(3)]),
        writer:new FormControl('',Validators.required),
        price:new FormControl('',Validators.required),
        image:new FormControl('', [Validators.required, ImageValidator.isValidExtension])
    })

    get name(){
        return this.bookForm.get('name');
    }

    get image(){
        return this.bookForm.get('image');
    }

    onSubmit(){
        console.log(this.bookForm.value);
    }

    updateBook(){
        this.bookForm.patchValue({
            name:'Childhood',
            price:'5'
        })
    }
}

book.component.html

<post>
    <ul>
        <li *ngFor="let post of posts">
            {{post.title}}
        </li>
    </ul>
</post>

Answer 1

变量 posts 正在 book.component.html 中使用，因此预计将在 book.component.ts 中声明。由于它不存在，因此会引发错误。如果您可以按如下方式在 BookComponent 中移动该代码块，您应该能够解决此问题：

export class BookComponent {

  posts;
  constructor(private http:HttpClient) { 
    http.get('https://jsonplaceholder.typicode.com/posts')
      .subscribe(response=>{
        //console.log(response);
        this.posts=response;
      })
  }
}

Angular 2 错误 TS2339：属性 'posts' 在类型 'BookComponent' 上不存在

Angular 2 error TS2339: Property 'posts' does not exist on type 'BookComponent'

angular2-template

angular