时间戳

首页 > 解决方案 > 使用类型=数字的 Angular Dart 材料输入时出现问题

angular - 使用类型=数字的 Angular Dart 材料输入时出现问题

问题描述

我正在尝试使用 MaterialDirectives 中的元素构建一个带有 Angular Dart 的网络应用程序（本质上是一个在线商店）来构建应用程序的元素。现在我正在处理将与库存数据库等一起使用的后端。但是我认为要么包裹有问题，要么我做错了什么。不确定是哪个，可能是我做错了什么，因为它在在线演示上运行良好。我查看了演示的源代码，似乎看不出我做错了什么。

所以，问题是，当我运行程序时，我收到以下错误Type 'double' is not a subtype of type 'String'。当程序使用数据库中的现有项目填充页面时，以及当我尝试更改价格、成本或库存的值时，都会出现此错误。我还注意到标签和前导文本不会出现在除“名称”之外的任何输入上，除非价格、成本和库存都为空。在我看来，Angular 对数字输入感到窒息，因为它需要一个字符串，尽管我已经明确指定了type="number".

似乎与该问题相关的代码如下。

在组件的 html 模板中：

<material-expansionpanel-set *ngIf="!products.isEmpty">
  <material-expansionpanel *ngFor='let product of products'
    expandIcon="edit" [alwaysHideExpandIcon]="true"
    [hideExpandedHeader]="true" name='{{product.name}}'>

      <material-input floatingLabel label="Name"
        [(ngModel)]='product.name'></material-input>

      <material-input floatingLabel label="Price"
        type='number' step='0.01' checkPositive leadingText='$'
        errorMsg="Enter a valid price" [(ngModel)]='product.price'></material-input>

      <!-- ... Some similar stuff cut out here so the post wasn't a mile long ... -->

  </material-expansionpanel>
</material-expansionpanel-set>

以及产品类的代码：

class Product{
  final int id;
  String name;
  String description;
  double cost;
  double price;
  int stock;
  Category category;

  Product(this.id, this.name, {this.price, this.cost, this.stock, this.category, this.description});
}

模板循环的 products 数组只是 Product 对象的数组。现在，该列表已硬编码到程序中，尽管随着开发的继续，它显然会从服务器获取它。

那么，我怎么能告诉它实际上期望一个数字呢？是否有一个开关或我必须设置的东西我错过了？没有数字输入，一切似乎都可以正常工作。

标签： angulardartangular-dart

解决方案

对于面临同样问题的其他人，根据我在评论中收到的建议，通过升级到 Angular 5 可以 100% 解决。不是我希望的答案，因为它需要大量代码重构才能更新到 Angular 5，但我在开发这个项目时足够早，它是可管理的。我注意到我一直关注的在线演示中的示例代码也是使用 Angular 5 构建的，所以在我看来，非文本<material-input>只是不是在 Angular 4 中开发的。更聪明的人可能有更好的答案，但这适用于我。希望它可以帮助别人！

推荐阅读