显示2差分网阵列导致单个角度视图

时间:2018-06-04 09:27:24

标签: angular typescript

我有2个数组,我从没有FK或其他任何共同点的API获取。在我的ts中结果还可以。但是视图是空的。(调试结果在代码中标记)`

ngOnInit():void {
        this.data.loadShul()
            .subscribe(success => {
                if (success) { //Debug Results: success = true
                    this.cafe = this.data.cafe,//Debug Results: Array(1) 0:{cafe:Array(5),restaurant :Array(5)}
                        this.restaurant = this.data.restaurant;
                }
            });
    }`

我的观点:

<ul>
    <li *ngFor="let sy of cafe">
        name: {{sy.name}}  
    </li> 
</ul>
<ul style="background-color:red"> 
    <li *ngFor="let mk of restaurants">
        {{ mk.id }}
    </li>
</ul>
Im getting empty Li tag. 

我的json看起来像(EGCafé):

`[
    {
               "cafe": [
            {
                "id": 1,
                "name": "TestCafe  ",
                "style": "dairy cafe"
            },
            {
                "id": 2,
                "name": "cafe test ",
                "style": "vegan"
            },
            {
                "id": 3,
                "name": "AnyCaffe  ",
                "style": "bakery"
            },
            {
                "id": 4,
                "name": "Pastry    ",
                "style": "Breads and \u0086Pastry\u0087"
            },
            {
                "id": 5,
                "name": "Fantastic ",
                "style": "pizza"
            }
        ],`

enter image description here

1 个答案:

答案 0 :(得分:1)

您的代码很好,您需要像这样更改html

set "var=value"

希望这会显示 *ngFor="let sy of cafe[0]?.cafe 代码..