Переменная шаблона, вызывающая ошибку синтаксического анализа шаблона: не существует директивы с параметром "exportAs", установленным на "#start_date" - PullRequest
Новая
       7

Переменная шаблона, вызывающая ошибку синтаксического анализа шаблона: не существует директивы с параметром "exportAs", установленным на "#start_date"

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

Попытка построить DateDicker Material Design по их документам.

Примечание: конечная цель состоит в том, чтобы связать входные данные средства выбора даты с переменной компонента, однако я не могу обойти эту самую основную часть.

Я уверен, что делаю что-то глупое!

Ошибка в консоли:

Uncaught Error: Template parse errors: There is no directive with "exportAs" set to "#start_date" ("Change)="updateFilters()" placeholder="Search"/><input mat-datepicker="start_date"/><mat-datepicker [ERROR ->]#start_date="#start_date"></mat-datepicker><select name="type" [(ngModel)]="filters.fields.type" (ngM"): ng:///AppModule/AccountingComponent.html@0:574

Файл мопса: 

.filters
  input(mat-datepicker="start_date")
  mat-datepicker(#start_date)

Прозрачный HTML: 

<div class="filters">
    <input mat-datepicker="start_date" />
    <mat-datepicker #start_date="#start_date"></mat-datepicker>
</div>

Очевидно, что Angular не нравится атрибут #start_date на входе, но мое понимание ссылочных переменных шаблона слабое, и я не смог найти ресурс, который поможет разобраться в том, что я я делаю неправильно.

Что нужно изменить, чтобы эта работа работала правильно?

ПРИМЕЧАНИЕ - я использую Webpack 3 с pug-html-загрузчиком для переноса pug => html.

Ответы [ 2 ]

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

@ Ответ Антонио правильный.

Поскольку я использовал Webpack 3 и переносил мопса с помощью pug-html-loader , мне пришлось дополнительно разобраться, как сделать так, чтобы он перемещался по желанию.

В конечном счете мне нужно было добавить опцию doctype к транспайлеру мопса (doctype: 'html' заставляет добавить атрибут без значения ).

Чтобы сделать это, мне нужно было изменить конфигурацию Webpack для правильной передачи аргумента:

Старая конфигурация webpack.conf.js: 

module.exports = {
  module: {
    rules: [
      // ... other rules omitted for brevity...
      {
        test: /\.pug$/,
        loaders: ['raw-loader', 'pug-html-loader'],
      }
    ]
  },
  plugins: [...]
}

Изменено на НОВУЮ конфигурацию webpack.conf.js: 

module.exports = {
  module: {
    rules: [
      // ... other rules omitted for brevity...
      {
        test: /\.pug$/,
        // NOTE: 'loaders' is deprecated in favor of 'use'
        use: [
          'raw-loader',
          {
            loader: 'pug-html-loader',
            options: {
              doctype: 'html'
            }
          }]
      }
    ]
  },
  plugins: [...]
}
0 голосов
/ 11 мая 2018

Вы пытаетесь вставить значение в свойство mat-datepicker, где вы должны вставить тип переменной.Переменная шаблона: # start_date = "HTMLDomElement" 

<mat-datepicker #start_date="string"></mat-datepicker>

Конечный должен быть 

 <mat-datepicker #startDate></mat-datepicker>

Компонент 

@ViewChild('startDate') startDate : HTMLDOMElement(i.e);
...