Ionic 5 - ngfor 不显示在组件上答案

【问题标题】：Ionic 5 - ngfor not diplaying on componentIonic 5 - ngfor 不显示在组件上
【发布时间】：2020-07-09 13:28:19
【问题描述】：

我快疯了，我创建了一个新组件，他工作正常。现在我想在两个页面上使用它。

然后我创建了一个组件模块（/components/all-components.module.ts），如下所示：

import { NgModule } from '@angular/core';
import { TagsComponent } from './tags/tags.component';
import { IonicModule } from '@ionic/angular';


@NgModule({
  imports: [IonicModule],
  declarations: [
    TagsComponent
  ],
  exports: [
    TagsComponent
  ]
})

export class AllComponentsModule {}

我在 app.module.ts 上添加了 AllComponentsModule，在我的 2 页模块上我添加了相同的。

现在，当我显示文本或变量时，我的组件工作正常，我的 console.log 会返回数据，但如果我使用 *ngFor，则不会出现任何内容。

最后，这是我的组件

import { Component, OnInit, Input } from '@angular/core';

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

  @Input() userTags: any;

  constructor() {
  }

  ngOnInit() {
      console.log(this.userTags);
  }
}

还有观点：

<p>hi</p>
<div *ngFor="let tag of userTags">
  <p>{{tag?.name}}</p>
</div>

【问题讨论】：

ngFor 需要是一个数组，而不是任何数组。试试@Input() userTags: [];

标签： angular ionic5

【解决方案1】：

好吧，我不明白为什么，但是如果我使用一个模块来存储所有组件。在我的all-components.module.ts 上，我必须将CommonModule 用于解释*ngFor、*ngIf 等。

使用 CommonModule 导入一切正常！

这是更新的代码：

import { NgModule } from '@angular/core';
import { TagsComponent } from './tags/tags.component';
import { CommonModule } from "@angular/common";

@NgModule({
  imports: [CommonModule],
  declarations: [
    TagsComponent
  ],
  exports: [
    TagsComponent
  ]
})

export class AllComponentsModule {}

【讨论】：