Question

我需要从文件menu.components.ts中导出数据，以便可以在menu.components.html中进行渲染。

在导出const data = [{name: "Mon, 28", from: 10236, to: -0, time: "2019-01-28T18:51:04+01:00"},{name: "Tue, 29", from: 10209, to: -0, time: "2019-01-29T18:51:03+01:00"},{name: "Wed, 30", from: 12088, to: -0, time: "2019-01-30T18:51:01+01:00"},{name: "Thu, 31", from: 10789, to: -0, time: "2019-01-31T18:50:59+01:00"},{name: "Fri, 1", from: 11449, to: -0, time: "2019-02-01T18:50:56+01:00"},{name: "Sat, 2", from: 13404, to: -0, time: "2019-02-02T18:50:48+01:00"}] const data2 = data.map(entry => { const rObj = {...entry} rObj['from'] = entry['from']/1000; return rObj; }) console.log(data2);内的数据时，我通常会感到困惑。有时我会看到它与冒号一起导出，有时等于。

共享文件夹

dish.ts

class MenuComponent implements OnInit

共享文件夹

dishes.ts

export class Dish {
        id: String;
        name: String;
        image: String;
        category: string;

menu.component.ts

import { Dish } from './dish';

export const Dishes: Dish[] = [
    {
        id: '0',
        name: 'Uthappizza',
        image: '/assets/images/uthappizza.png',

menu.component.html

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

    import { Dishes } from '../shared/dishes';

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

      Dishes;

      constructor() { }

      ngOnInit() {
      }
    }

Answer 1

在有角的，HTML模板只能访问字段和组件类的方法。所以，你可以创建一个组件变量发言权

public dishes: Dish[] = Dishes // the one you imported

并在html中，使用* ngFor遍历作为组件变量的dishes数组并显示它们。你也需要纠正你的HTML。请参阅文档以获取语法。

Answer 2

我想扩展@dileepkumar jami答案，因为您的HTML文件也有错误。也就是说，.name不会做任何事情，因为它没有引用实际的变量。

作为如何遍历菜肴并显示其名称的示例，您将需要以下内容。

在组件则需要public dishes: Dishes[] = Dishes。这样会将导入的对象分配给名为dishes的组件数据成员。
在HTML文件中，您需要：<div *ngFor="let dish of dishes">{{dish.name}}</div>这将遍历您在组件中定义的菜肴阵列，并在新的div中显示每个菜肴的名称。

如何从菜单组件中导出数据，以便可以在相应的html组件中使用

2 个答案: