在数组中通过* ngFor,Angular 9在html模板中生成列表的问题

问题描述 投票:0回答:1

* 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,但这不能解决问题。无法理解问题所在。编译器说一切都很好,浏览器控制台没有显示任何警告或错误。谢谢大家!

angular frontend single-page-application
1个回答
0
投票

确保NgModule装饰器的声明数组中的app.moudle.ts内部有MinimixesComponent

@NgModule({
    declarations: [MinimixesComponent]
});
© www.soinside.com 2019 - 2024. All rights reserved.