【问题标题】:How would I render a list of custom object type in Angular?如何在 Angular 中呈现自定义对象类型列表?
【发布时间】:2017-07-27 23:45:40
【问题描述】:

我在 java 中有一个列表。自定义对象具有三个字段,标题、说明、数据。我希望能够使用 angularjs 以有意义的方式呈现列表。我想将标题放在顶部,然后是数据上方的说明,这些说明将包装在列表中每个 CustomObject 的框中。我对前端很陌生,以前从未使用过 Angularjs。

我正在使用 Angular1。我最初将它作为一个巨大的字符串传递,现在我有一个列表,我可以看到该列表到达前端并且可以看到列表的内容。它只是没有以可读/有意义的方式显示。我希望为每个 CustomObject 垂直划分列表。每个 CustomObject 部分的顶部都应该有一个标题,然后是说明,然后是围绕数据的包装盒。 Java 类是这样的:

class CustomObject{
  String title;
  String Instructions;
  String Data;
}

我希望它看起来像:

1. Title A
   Instructions A
   --------
   |Data A|   
   --------
2. Title B
   Instructions B
   --------
   |Data B |
   --------

【问题讨论】:

  • 我假设您有一个 REST API 或 JSON 可以从 java 中公开该信息,对吗?
  • 请提供代码来演示您尝试过的内容、数据的外观以及您希望它的外观。还有关于 Angular1 或 Angular2 的问题吗?
  • @GünterZöchbauer 为问题添加了更多信息。请看一看。

标签: javascript angularjs angularjs-directive angularjs-scope frontend


【解决方案1】:
<ol>
  <li *ngFor="let item in customObjects">
    <div>Title {{item.title}}</div>
    <div>Instructions {{item.Instructions}}</div>
    <div>Data {{item.Data}}</div>
  </li>
</ol>

【讨论】:

  • 虽然此代码可能会回答问题,但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。
  • @DonaldDuck 这个问题还很不清楚。我等待反馈,然后我会更新它。
  • 它不太喜欢*ngFor。它适用于 ng-repeat。
  • 你最初添加了 Angular2 标签
猜你喜欢
  • 2012-06-07
  • 1970-01-01
  • 2021-09-03
  • 2020-10-23
  • 1970-01-01
  • 1970-01-01
  • 2011-02-07
  • 2015-11-22
  • 1970-01-01
相关资源
最近更新 更多