Question

我有一个主要的GLTkComponent ============= xgltk.dart GLTkComponent.dart =============================== ===

@observable
class GLTkComponent extends WebComponent {

  ObservableList<JsonObject> ListTk = toObservable(new ObservableList<JsonObject>());

  JsonObject currentRow;

  cm.ViewType currentView;

  inserted() {
    populateAccountsTable();
    currentView = cm.ViewType.LIST;
  }

  populateAccountsTable() {
    ServiceStack.get("http://localhost:9998/dmtk").done((results) {

      JSON.parse(results).forEach((data) {
        JsonObject currentRow = new JsonObject.fromMap(data);
        ListTk.add(currentRow);
      });

    }).fail((e)=>print("Error in xgltk.populateAccountsTable() ${e}")).go();

  }
}

============= xgltk.html =============================== ============

...
<body>
    <element name="x-gltk" constructor="GLTkComponent" extends="div">
      <template>
        <div class="container-fluid"> <!--list -->
          <div class="row-fluid">
            <template instantiate="if currentView == cm.ViewType.LIST">
              <x-gltk-list bind-list="ListTk" bind-current="currentRow" bind-view="currentView"></x-gltk-list>
            </template>
          </div>
        </div> <!-- end div list -->

      </template>
      <script type="application/dart" src="xgltk.dart"></script>
    </element>
  </body>
...

============ xgltk-list.dart GlTkListComponent ==========================

@observable
class GlTkListComponent extends WebComponent {

  ObservableList<JsonObject> list;

  JsonObject current;

  cm.ViewType view;

  inserted() {

  }

  String handleMenuClickClass(){
    if(current != null) {
      return "";
    }
    else {
      return "disabled";
    }
  }

  handleRowClick(JsonObject row) {
    current = list.firstWhere((e) => e.Tk == row.Tk);

    assert(list is ObservableList<JsonObject>);
    assert(current is JsonObject);
  }

  String handleRowClickClass(JsonObject row){
    if(current != null) {
      return row.Tk == current.Tk ? "info" :"";
    }
    else {
      return "";
    }
  }

  AddNew() {
  }
}

======================= xgltk-list.html =================== ======

---
<body>   
    <element name="x-gltk-list" constructor="GlTkListComponent" extends="div">
      <template>
        <div id="id_list">   <!--div list -->
          <div class="span8" id="content">
            <table class="table table-hover" id="id_list_table">
              <thead>
                <tr>
                  <th>Tài khoản</th>
                  <th>Tên tài khoản</th>
                  <th>Ngoại tệ</th>
                  <th>Định khoản</th>
                  <th>Công nợ</th>
                  <th>Sổ cái</th>
                  <th>Tk Mẹ</th>
                </tr>
              </thead>
              <tbody template iterate="row in list">
                <tr on-click="handleRowClick(row)" class="{{handleRowClickClass(row)}}">
                  <td>{{row["Tk"]}}</td>
                  <td>{{row["Ten_Tk"]}}</td>
                  <td>{{row["Ma_Nt"]}}</td>
                  <td><template instantiate="if row['Loai_Tk']"><i class="icon-check"></i></template></td>
                  <td><template instantiate="if row['Tk_Cn']"><i class="icon-check"></i></template></td>
                  <td><template instantiate="if row['Tk_Sc']"><i class="icon-check"></i></template></td>
                  <td><template instantiate="if row['Tk'] != row['Tk_Me']">{{row["Tk_Me"]}}</template></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>  <!-- div list -->
      </template>
      <script type="application/dart" src="xgltk-list.dart"></script>
      <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
      <script src="packages/browser/dart.js"></script>
    </element>
  </body>
---

当我点击List时，它有错误：

web_ui.observe: unhandled error calling Closure: (dynamic, dynamic) => dynamic from <observer 56>.
error:
type 'List<dynamic>' is not a subtype of type 'JsonObject' of 'value'.

stack trace:
#0      GLTkComponent.currentRow= (http://127.0.0.1:3030/Z:/future13/3SNext/web/out/xgltk.dart:126:29)
#1      GLTkComponent.created_autogenerated.<anonymous closure>.<anonymous closure> (http://127.0.0.1:3030/Z:/future13/3SNext/web/out/xgltk.dart:62:56)
#2      DomPropertyBinding._safeSetter (package:web_ui/templating.dart:360:11)
#3      DomPropertyBinding.insert.<anonymous closure> (package:web_ui/templating.dart:369:58)
#4      _ExpressionObserver._runCallback (package:web_ui/observe/observable.dart:556:16)
#5      _ExpressionObserver._deliver (package:web_ui/observe/observable.dart:640:17)
#6      deliverChangesSync.deliverChangesSync.<anonymous closure> (package:web_ui/observe/observable.dart:435:58)
#7      SplayTreeMap.forEach (dart:collection/splay_tree.dart:209:8)
#8      deliverChangesSync.deliverChangesSync (package:web_ui/observe/observable.dart:435:33)
#9      setImmediate.<anonymous closure> (package:web_ui/src/utils_observe.dart:29:13)
#10     _ReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:81:92)

如何修复它。请帮我。非常感谢你。

Tuan Hoang Anh

Answer 1

我无法完全重现您提供的数据所显示的内容，但我认为错误消息是什么

type'List'不是'value'的'JsonObject'类型的子类型。

告诉您，当您拨打currentRow

时，某些时候List包含JsonObject而不是ListTk.add(currentRow)

JSON.parse(results).forEach((data) {
    JsonObject currentRow = new JsonObject.fromMap(data);
    ListTk.add(currentRow);
});

如果你的JSON看起来像这样：

[
  {"Tk":"111","Ten_Tk":"Tiền mặt"...},                 <-- Becomes a JsonObject
  {"Tk":"911","Ten_Tk":"Xác định kết quả kinh doanh"}, <-- Becomes a JsonObject
  [{...},{...}]                                        <-- Becomes a List
]

您可以尝试添加几行print行来帮助诊断：

  print(data); // output the actual data that JsonObject is going to convert from
  print(data is Map); // expecting true
  var currentRow = new JsonObject.fromMap(data); 
  print(currentRow.runtimeType.toString()); // expecting JsonObject
  ListTk.add(currentRow);

Dart绑定JsonObject错误：类型'List <dynamic>'不是'value'的类型'JsonObject'的子类型</dynamic>

1 个答案: