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

问题描述

直升机（+l），

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

我有一个 post 组件，在 post-list 组件内，在 app 组件内。我还做了一个后期服务：

后列表组件 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 : 
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 组件中，我对另一个组件进行了不规则的引用

标签： htmlangulartypescript

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

问题描述

解决方案

推荐阅读