Question

我的模式，

{
"eventCacheMemorySizeMB":` {
  "type": "string",
  "title": "The Eventcachememorysizemb Schema ",
  "default": "",
  "examples": [
    "4095"
  ]
 },
}

在我的布局中，我创建了一个名为message的小部件，我想在其中编写

{
                      'type': 'section',
                      'htmlClass': 'col-sm-6',
                      'items': [
                          {
                              'key': 'eventCacheMemorySizeMB',
                              'type': 'integer',
                              'title': Dictionary.XXX.TITLE,
                              'feedback': "{'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-star': !hasSuccess() }"
                          },
                          {
                              'widget': 'message',
                              'message': 'This size stores approximately {eventCacheMemorySizeMB * 1024 *1024} events'
                          }
                      ]
}

因此，它的工作方式是，我应该获取实时的'eventCacheMemorySizeMB'并计算它可以容纳的事件数。不确定如何实现这一目标，真的很困难。

我知道，由于'eventCacheMemorySizeMB'在我的布局中不是变量/常量，所以它暂时不起作用，而只是我的架构的关键。我只是为了说明目的而编写它，以可视化最终结果。

我尝试在布局中创建一个常量并将relatime数据对象传递给它，以便可以使用，

  {
      'widget': 'message',
      'message': 'This size stores approximately '+realtimeData.eventCacheSize+' events'
  }

这将获得启动组件对象的值。但它不会绑定更改时的值（双向绑定）。

其次，我尝试wrting onChange函数并将其传递给json-schema-form

HTML文件，

<json-schema-form
        [schema]="realtimeSchema"
        [layout]="realtimeLayout"
        [data]="realtimeData"
        (onSubmit)="onSubmit($event)"
        (onChanges)="onChange($event)">
    </json-schema-form>

内部组件

onChange(ev: any) {

    if ( Object.keys(ev).length ) {
        if ( !this.prevData ) {
            //initial copy. happens before any change in the form
            this.prevData=Object.assign({}, ev);
        } else {
            if ( JSON.stringify(this.prevData) !== JSON.stringify(ev) ) {
                this.prevData=Object.assign({}, ev);
                if (!ev.Active) {
                    //chnage class from 'btn-success' to 'btn-warning'
                    //let lbl = document.querySelector('#ng-reflect-ng-for-of');
                    //console.log('yo:' + lbl);
                } else {
                    //chnage class from 'btn-warning' to 'btn-success'
                }
            }
        }

        this.realtimeData = Object.assign(this.realtimeData, this.prevData);
        console.log("after",this.realtimeData.eventCacheMemorySizeMB);
    }
};

这将使用更新的对象重新初始化onChnage的整个表单。但是，用户将注意力放到每个更改上，这完全不是理想的情况。

angular2-json-schema-form 2路数据绑定（实时计算值）

0 个答案: