bixi/packages/core/editable-table/demo/select-observable.md

企业级中后台前端解决方案

---
title:
  zh-CN: 支持 Select Observable
order: 8
---

## zh-CN

select options 支持 Observable。

## en-US

```ts
import { Component } from '@angular/core';
import { EEditableColType } from '@bixi/core/editable-table';
import { BehaviorSubject, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Component({
  selector: 'bixi-editable-demo1',
  template: `
    <bixi-editable-table [(ngModel)]="rows" [cols]="cols"></bixi-editable-table>
  `
})
export class TestComponent {
  cols = [
    {
      key: 'name',
      name: '审核点',
      type: EEditableColType.select,
      options: [
        {
          name: '广州',
          value: 'guangzhou'
        },
        {
          name: '深圳',
          value: 'shenzhen'
        }
      ]
    },
    {
      key: 'relation',
      name: '异步Select',
      type: EEditableColType.select,
      options: of([
        {
          name: 'shanghai',
          value: 'shanghai'
        },
        {
          name: 'beijing',
          value: 'beijing'
        }
      ])
    },
    {
      key: 'delay',
      name: '异步Select延迟 3 秒',
      type: EEditableColType.select,
      options: of([
        {
          name: '优酷',
          value: '1'
        },
        {
          name: '爱奇艺',
          value: '2'
        }
      ]).pipe(
        delay(3000)
      )
    },
    {
      key: 'subject',
      name: 'Subject',
      type: EEditableColType.select,
      options: new BehaviorSubject([
        {
          name: 'hefei',
          value: 'hefei'
        },
        {
          name: 'wuhan',
          value: 'wuhan'
        }
      ])
    }
  ];
  rows = [
    {
      name: 'guangzhou',
      relation: 'shanghai',
      delay: '1',
      subject: 'hefei'
    },
    {
      name: 'shenzhen',
      relation: 'beijing',
      delay: '2',
      subject: 'wuhan'
    }
  ]
}
```