时间戳

首页 > 解决方案 > Angular 6 数据未绑定到 UI OnInit

javascript - Angular 6 数据未绑定到 UI OnInit

问题描述

我有一个问题，我的动态数据没有绑定到 UI 和数据表。我尝试过使用各种方法，但它不起作用。我正在使用 smart admin 最新主题来开发网站

当我点击 api 我得到响应。

var tabledata:any[]=[]
Get(){
    this.getservice().subscribe(
        res=>{
            if(res && res.data && res.data.length>0){
                this.tabledata=res.data;
                console.log(this.tabledata);
            }
        }
    )
}

在 html 中

 <tr *ngFor="let data of tabledata">
        <td>{{data.name}}</td>
        <td>{{data.age}}</td>
    </tr>

标签： javascriptangulartypescriptangular6angular-cli

解决方案

您能否尝试在 OnInit 中执行您的 Get 方法？为什么您的 Get 方法以大写字母开头？为什么将您的表声明为任何表？使用类型化的对象我总是更好。你可以试试下面的代码吗？

    vartabledata: Person[];

    class MyComponent implements OnInit {

    ngOnInit() { this.get()  
      }

    get(){
        this.getservice().subscribe(
            res=>  {this.tabledata = res.data;
                    console.log(this.tabledata);}
       )}
    }

在前面，我建议您添加 *ngIf 以便仅在加载数据时显示表格。

<div *ngIf="tabledata">
<tr *ngFor="let data of tabledata">
        <td>{{data.name}}</td>
        <td>{{data.age}}</td>
    </tr>
</div>

如果即使这样也没有数据，请尝试执行

<div *ngIf="tabledata">
    <tr *ngFor="let data of tabledata">
            {{data | json}}
        </tr>
    </div>

我认为您收到了一个不包含姓名和年龄属性的数据对象

推荐阅读