数据未显示在模板上（角度）

Question

我正在通过做简单的项目来练习 Angular。 我看到所有关于 SO 的问答，这与我的问题非常相似。 原因是我试图在异步数据初始化为articles变量之前显示它，但我已经尝试过*ngIf和async pipe。

我的服务

 public getArticlesByCategory(): Observable<any> {
   return this.request.get(this.categoryURL) 
  }

我的组件.ts

  public articles: any[] = [];

  constructor(
    private articleService: ArticlesService
  ) { }

  ngOnInit(): void {
    this.articleService.getArticlesByCategory().subscribe({
      next: (data) => {
        this.articles = data.articles; 
        console.log(this.articles)
      },
      error: (error) => {
        console.log(error);
      }
    })
  }

模板

<div *ngIf="articles">
    <div *ngFor="let article of articles">
        <p>{{article.title}}</p>
    </div>
</div>

Answer 1

查看您的代码后，我发现以下错误：-

• 在app.routing.module.ts的rediretTo中添加pathMatch:'full'

const routes: Routes = [
  { path: '', redirectTo: 'articles', pathMatch: 'full' },
  { path: 'articles', component: ArticlesComponent },
];

• 在app.module.ts的声明中添加ArticlesComponent

@NgModule({
  declarations: [AppComponent, NavbarComponent, ArticlesComponent],
  imports: [
    // CommonModule,
    BrowserModule,
    RouterModule,
    HttpClientModule,
    AppRoutingModule,
  ],
  providers: [ArticlesService],
  bootstrap: [AppComponent],
})