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

【问题标题】：Issue using Angular Dart material-input with type=number使用类型=数字的 Angular Dart 材料输入时出现问题
【发布时间】：2018-10-18 16:37:36
【问题描述】：

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

所以，问题是，当我运行程序时，我收到以下错误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 对象的数组。现在，该列表已硬编码到程序中，但随着开发的进行，它显然会从服务器获取它。

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

【问题讨论】：

你使用的是什么 Dart 和 Angular 版本？
Dart 1.24.3，角度 4.0.0+2 和 angular_components 0.8.0
我认为最近发生了与您的问题相关的变化。您可以检查 angular_components 中的提交，但如果它实际上是相关的，我确信它仅适用于 Angular 5。作为解决方法，您可以使用 num.parse(...) 自己解析字符串
如果我没记错的话，Angular 5 仍处于 Alpha 阶段，不是吗？
那是因为它依赖于未发布的 Dart。我认为使用 Angular 5 比使用 Angular 4 更好，可能更稳定。

标签： angular dart angular-dart

【解决方案1】：

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

【讨论】：