Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/29.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript ngFor没有以html格式显示项目?角度2/4_Javascript_Angular_Typescript - Fatal编程技术网

Javascript ngFor没有以html格式显示项目?角度2/4

Javascript ngFor没有以html格式显示项目?角度2/4,javascript,angular,typescript,Javascript,Angular,Typescript,这真让我烦恼。我试图以2/4的角度显示一个数组。我想这是个错误。html、服务或组件部分,因为我的节点后端工作正常。我的html看起来像这样 <div class = "container"> <li *ngFor = "let customer of customers"> <div class = "col md-6"> {{ customer.firstName }} </div> </li&g

这真让我烦恼。我试图以2/4的角度显示一个数组。我想这是个错误。html、服务或组件部分,因为我的节点后端工作正常。我的html看起来像这样

<div class = "container">

<li *ngFor = "let customer of customers">
    <div class = "col md-6">
            {{ customer.firstName }}
    </div>
</li>
<div *ngFor = "let customer of customers">
    <div class = "col md-6">
            {{ customer.lastName }}
    </div>
</div>
我的组件是这个

export class CustomersComponent implements OnInit {

customers: Customer[];
customer: Customer;
firstName: string;
lastName: string;

//initialize customer service   
constructor(private customerService: CustomerService) { }

//initiated once component is loaded
ngOnInit() {

this.customerService.getCustomers()
    .subscribe( customer => 
        this.customer = customer);


 }

您有一个输入错误,将
customer
更改为
customers

this.customerService.getCustomers()
    .subscribe( customers => {

        this.customers = customers

      });

 }

仅根据名称,
getCustomers().subscribe(customer=>…
似乎有点可疑。在模板中定义与类中相同的名称也是一个坏主意。此外,您还应该查看控制台中得到的错误,以便给出答案。如果这对您来说太迟钝,您的类中有两个属性,
customer
customers
,它们定义为它们听起来分别是“单数”和“列表”。请注意您的服务方法订阅是如何分配给“单数”订阅的。这只是一个起点提示,但一般信息是,您可能真的需要在“之前”进行一些调试跑开并向StackOverflow发帖。这是首选。John谢谢。Neil你的迟钝。你们都为我指出了正确的方向。应该是这样。客户。这解决了问题完美。谢谢你“你有一个印刷错误”-然后接近印刷错误,因为这对其他任何人都没有用。
this.customerService.getCustomers()
    .subscribe( customers => {

        this.customers = customers

      });

 }