* ngFor不显示任何内容。默认cli的<p>minimixes works!</p>
显示出来,因此看起来像ngFor的问题。请查看我的代码:
minimixes.component.ts-显示的组件
import { Component } from '@angular/core';
import { MINIMIXES } from './minimixes';
@Component({
selector: 'app-minimixes',
templateUrl: './minimixes.component.html',
styleUrls: ['./minimixes.component.scss']
})
export class MinimixesComponent {
minimixes = MINIMIXES;
}
minimixes.interface.ts-接口
export interface Minimix {
name: string;
coverSrc: string;
soundcloudSrc: string;
description: string;
}
minimixes.ts-我在这里存储minimixes数据
import { Minimix } from './minimixes.interface';
export const MINIMIXES: Minimix[] = [
{name: 'name1', coverSrc: 'cover1', soundcloudSrc: 'src1', description: 'desc1'},
{name: 'name2', coverSrc: 'cover2', soundcloudSrc: 'src2', description: 'desc2'}
];
minimixes.component.html
<ul>
<li *ngFor="let minimix of minimixes">
<span>{{ minimix.name }}, {{ minimix.coverSrc }}</span>
</li>
</ul>
但是当我仅在此模板中放置文本时,例如默认cli的<p>minimixes works!</p>
或任何其他内容-一切都很好。我也尝试导入CommonModule,但这不能解决问题。无法理解问题所在。编译器说一切都很好,浏览器控制台没有显示任何警告或错误。谢谢大家!
确保NgModule装饰器的声明数组中的app.moudle.ts内部有MinimixesComponent
。
@NgModule({
declarations: [MinimixesComponent]
});