Angular应用在加载时卡住了。 （可能是类似@Input（）的错误idk）

Question

Helo（+ l），

我想制作一个显示帖子的简单应用。我的问题是，当我部署显示“正在加载...”的第一页卡住时。请帮助我，我确定这没什么大不了的。

我在post-list组件内部和app组件内部都有一个post组件。我也做了一个后期服务：

后列表组件html：

<h2>Posts</h2>
<ul class="list-group">
  <app-post-list  *ngFor="let post of posts; let i = index"
                 [postTitle]="post.titre"
                 [postContent]="post.content"
                 [postLikes]="post.loveIts" 
                 [postDate]="post.created_at"
                 [index]="i"
                 [id]="post.id"></app-post-list>
</ul>

post-list.ts：

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';
import { PostService } from '../services/post.service'

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.scss']
})
export class PostListComponent implements OnInit {
  
  posts: any[];
  @Input() id: number;
  
  constructor(private postService: PostService) { }
  
  ngOnInit() {
    this.posts = this.postService.posts;
  }
}

post.html：

<li [ngClass]="{'list-group-item': true,
'list-group-item-success': postTitle === 'lol',
'list-group-item-danger': postTitle === 'lol'}">

<h4 [ngStyle]="{color: getColor()}">{{ postTitle }}</h4>
<p>{{ postDate | date:short}}</p>
 
<p>{{ postContent }}</p>
<button class="btn btn-sm btn-success"(click)="like()">J'aime</button>
<button class="btn btn-sm btn-danger"(click)="dislike()">Je n'aime pas</button>
</li>

post.ts：

import { Component, OnInit, Input } from '@angular/core';
import { PostService } from '../services/post.service'


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

  @Input() postTitle: string;
  @Input() postContent: string;
  @Input() postLikes: number;
  @Input() postDate: Date;
  @Input() id: number;
  @Input() index: number;

  constructor(private postService: PostService) { }

  ngOnInit() {}

  getColor() {
    if(this.postLikes > +0) {
      return 'green';
    } else if(this.postLikes < +0) {
      return 'red';
    }else {
      return 'gray';
    }
  }

  like(){
      this.postService.like(this.index);
  }

  dislike(){
    this.postService.dislike(this.index);
  }
}

post.service：

import { Post } from '../class/post';

export class PostService {
    private post1: Post;
    private post2: Post;
    private post3: Post;

    posts = [this.post1, this.post2, this.post3];
    
    constructor(){
        this.post1 = new Post();
        this.post1.setTitre("Pourquoi la poule traverse la route ?");
        this.post1.setloveIts(10);
        this.post1.setContent("Le fait que ce soit le poulet qui traverse la route ou que ce soit la route qui se meuve sous le poulet dépend uniquement de votre référentiel. Les poulets, au travers de longues périodes, ont été naturellement sélectionnés de telle sorte qu'ils soient génétiquement enclins à traverser les routes. La troisième loi des Poulets énonce qu'un poulet doit protéger sa propre existence sauf si cette protection le force à désobéir à un ordre humain ou à blesser un humain.")
        this.post1.setIndex(1);

        this.post2 = new Post();
        this.post2.setTitre("Allo ? A l'Huile !");
        this.post2.setloveIts(-40);
        this.post2.setContent("Hue hue hue");
        this.post2.setIndex(2);

        this.post3 = new Post();
        this.post3.setTitre("Parce que la forme est contraignante, l'idée jaillit plus intense !");
        this.post3.setloveIts(50);
        this.post3.setContent("L'un des exemples les plus célèbres de contrainte dans le domaine littéraire est La Disparition (1969) de Georges Perec, qui ne comporte pas la lettre e. Un autre exemple est celui de l'auteur britannique Christine Brooke-Rose dans Remake (1996), qui ne comporte pas la lettre t, et Between (1968), qui ne contient pas le verbe to be (être).");
        this.post3.setIndex(3);
    }
    
    like(i: number) {
        this.posts[i].incrementeLoveIts();
    }
    
    dislike(i: number) {
        this.posts[i].decrementeLoveIts();
    }

    getPostsById(id: number) {
        const post = this.posts.find(
          (s) => {
            return s.getIndex() === id;
          }
        );
        return post;
    }
}

编辑：

StackTrace：

Stacktrace : 
Uncaught Error: Template parse errors:
Can't bind to 'postTitle' since it isn't a known property of 'app-post-list'.
1. If 'app-post-list' is an Angular component and it has 'postTitle' input, then verify that it is part of this module.
2. If 'app-post-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ul class="list-group">
  <app-post-list  *ngFor="let post of posts; let i = index"
                 [ERROR ->][postTitle]="post.titre"
                 [postContent]="post.content"
                 [postLikes]=""): ng:///AppModule/PostListComponent.html@3:17

我认为在post-list.html组件中，我对其他组件做了不规则的引用

Answer 1

确实是那样。在post-list.html中，我引用的是<app-post-list></>而不是<app-post></>。

谢谢大家