Ошибка при вводе материала Angular Dart с type = number - PullRequest
Новая
       11

Ошибка при вводе материала Angular Dart с type = number

0 голосов
/ 08 мая 2018

Я пытаюсь создать веб-приложение (по сути, онлайн-магазин) с Angular Dart, используя элементы materialDirectives для создания элементов приложения. Прямо сейчас я работаю над серверной частью, которая будет работать с базой данных инвентаризации и тому подобным. Однако я думаю, что либо есть проблема с пакетом, либо я делаю что-то не так. Не уверен, что, возможно, я делаю что-то не так, так как он работает нормально на онлайн демо . Я просмотрел исходный код демонстрации и не могу понять, что я делаю неправильно.

Итак, проблема в том, что когда я запускаю программу, я получаю следующую ошибку Type 'double' is not a subtype of type 'String'. Эта ошибка появляется как при загрузке страницы, когда программа заполняет ее существующими элементами в базе данных, так и при попытке изменить значение цены, стоимости или запаса. Я также заметил, что метки и начальный текст не появляются ни на одном из входных данных, кроме «name», если только цена, стоимость и запас не равны нулю. Мне кажется, что 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. Прямо сейчас список жестко запрограммирован в программе, хотя по мере развития, очевидно, он будет извлекать его с сервера.

Итак, как я могу сказать, чтобы он действительно ожидал число? Есть ли переключатель или что-то, что я должен установить, что мне не хватает? Кажется, все работает нормально без числовых входов.

1 Ответ

0 голосов
/ 10 мая 2018

Для всех, кто сталкивался с этой же проблемой, она была решена на 100% путем обновления до Angular 5 согласно предложениям, которые я получил в комментариях.Не тот ответ, на который я надеялся, потому что для обновления до Angular 5 потребовалось много рефакторинга кода, но я был достаточно ранним в разработке этого проекта, им можно было управлять.Я заметил, что пример кода в онлайн-демонстрации, за которым я следовал, также был построен с использованием Angular 5, поэтому мне кажется, что нетекстовый <material-input> просто не был разработан в Angular 4. Кто-то умнее может иметь лучший ответ, ноэто сработало для меня.Надеюсь, это поможет кому-то еще!

...