Угловые жалобы не могут прочитать свойство неопределенного

У меня есть угловой шаблон, как показано ниже.

<section class = "section">
      <div class = "container">
        <form [formGroup] = "testForm">
          <div class = "columns is-multiline">
            <div class = "column is-2">
              <div class = "box">
                <h1 class = "subtitle">Test Array</h1>
                <div formArrayName = "salestest" *ngFor = "let sale of salestest.controls; let i=index">
                  <div [formGroupName] = "i">
                    <div class = "field">
                      <label class = "label">Test Sale1</label>
                      <div class = "control">
                        <input class = "input" type = "text" placeholder = "Sales" formControlName = "sales">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </section>

У меня есть такой компонент

export class SalesTestComponent implements OnInit {
  testForm: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.testForm = this.fb.group({
      salestest: this.fb.array([this.buildSalesTest()])
    });
    console.info("ngOnint was called");
  }

  buildSalesTest(): FormGroup {
    return this.fb.group({
      sales: ""
    });
  }

   get salestest(): FormArray {
    return <FormArray>this.testForm.get("salestest");
  }
}

Когда я создаю и запускаю это, я получаю сообщение об ошибке

ОШИБКА TypeError: Не удается прочитать значение свойства неопределенного

И строка 3 в шаблоне

<form [formGroup] = "testForm">

Я не уверен, почему angular жалуется на то, что не может прочитать свойство undefined.

Вот все сообщение об ошибке

ERROR TypeError: Cannot read property 'value' of undefined
    at Object.eval [as updateRenderer] (CreateSalesTestComponent.html:23)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:23838)
    at checkAndUpdateView (core.js:23213)
    at callViewAction (core.js:23449)
    at execComponentViewsAction (core.js:23391)
    at checkAndUpdateView (core.js:23214)
    at callViewAction (core.js:23449)
    at execEmbeddedViewsAction (core.js:23412)
    at checkAndUpdateView (core.js:23209)
    at callViewAction (core.js:23449)

И строка 23

ngOnInit() {
    this.testForm = this.fb.group({
      salestest: this.fb.array([this.buildSalesTest()])
    }); <!-- **Line 23** -->
    console.info("ngOnint was called");
  }

ошибка в строке №3?

Kajol Chaudhary 11.02.2019 13:24

Привет, да, это говорит об ошибке в строке № 3, которая является <form [formGroup] = "testForm"> в шаблоне, и сообщение об ошибке: «Невозможно прочитать значение свойства» неопределенного

jhon.smith 11.02.2019 13:27

Можете ли вы опубликовать все сообщение об ошибке? Я попробовал ваш код, и он отлично работает

yurzui 11.02.2019 13:33

Можете ли вы опубликовать весь файл CreateSalesTestComponent.html?

yurzui 11.02.2019 13:50

Ошибка исходит из вашего файла HTML, а не тс. Вы даже можете нажать на эту ошибку в консоли, и она приведет вас к тому месту, где она произошла.

yurzui 11.02.2019 13:56

Привет, Юрзуи, большое спасибо, что взглянули на него. Но это мой полный html-файл :)

jhon.smith 11.02.2019 14:00

О, мистер Юрзуй, вы правы, у меня был специальный символ в моем html-файле, проблема решена.

jhon.smith 11.02.2019 14:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
7
260
1

Ответы 1

Следующая строка неверна.

<div [formGroupName] = "i">

Измените его на

<div [formGroup] = "sale">

Вы назначаете индекс для formGroupName. Вот почему ваш атрибут формы не может найти в нем группу и ее элементы управления. Вот Рабочий пример

Дайте мне знать, если возникнут проблемы, я буду более чем счастлив помочь.

Другие вопросы по теме