Question

我正在尝试从数组中填充剑道网格。

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
  private users:User[];
  constructor(private _sharedService:SharedService) {

   }

  ngOnInit() {
    this._sharedService.getJSON().subscribe((users)=>{
      console.log(users);
      this.users=users;
    }, (error)=>{
      console.log(error);
    });

  }

users数组将从JSON文件中获取数据。

export class User {
    userId:String;
    userName:String;
    userAddress:String;
    userStatus:String
}

html文件看起来像..

<div class="container">
  <kendo-grid
  [kendoGridBinding]="users"
  [pageSize]="10"
  [pageable]="true"
  [sortable]="true"
  [filterable]="true"
  [groupable]="true"
  [height]="510">
  <kendo-grid-column field="Id" [width]="60"></kendo-grid-column>
  <kendo-grid-column field="Name" [width]="120"></kendo-grid-column>
  <kendo-grid-column field="Address" [width]="100"></kendo-grid-column>
  <kendo-grid-column field="Status" [width]="130"></kendo-grid-column>
</kendo-grid>

</div>

我只是遵循了一个教程。.但是我不需要像在普通表中那样展开数组并设置列吗？

问题是它只是显示标题而没有数据。我该怎么办？

Answer 1

尝试更改用户数组中的字段属性。

  <kendo-grid-column field="userId" title="Id" [width]="60"></kendo-grid-column>
  <kendo-grid-column field="userName" title="Name" [width]="120"></kendo-grid-column>
  <kendo-grid-column field="userAddress" title="Address" [width]="100"></kendo-grid-column>
  <kendo-grid-column field="userStatus" title="Status" [width]="130"></kendo-grid-column>

您无需手动解散数组，因为kendo grid的自定义指令可处理映射本身。

Created Demo here

Answer 2

您需要根据用户数据映射字段，

{{1}}

数组绑定到Kendo Grid Angular 2

2 个答案: