Angular Ошибка: «Нет доступа к значению для элемента управления формы с неопределенным атрибутом имени» в div

Question

Я просто пытаюсь использовать некоторую строковую интерполяцию внутри div для отображения длины свойства в представлении. Я получаю сообщение об ошибке в консоли Ошибка: «Нет доступа к значению для элемента управления формы с неопределенным атрибутом имени», и вызывающий ошибку div выделяется. Я начал с:

<div>{{allNouns.length}}</div>

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

<div name="allNounsLength" [(ngModel)]="allNouns" ngDefaultControl>{{allNouns.length}}</div>

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

Вот TS, связанный: App.module.ts - import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';

App.component.ts allNouns:any=[];

App.component. html - `` `

      <div name="allNounsLength" [(ngModel)]="allNouns" ngDefaultControl>{{allNouns.length}} 
     </div>

    <!-- <div>{{allNouns.length}}</div> -->

    <button class='btn btn-danger' (click)="generatePerson()">Generate Noun</button>

    <div class="toggleDiv">
      <label>Preloaded Nouns</label>
      <input id="preloadedNounsCheck" 
      type="checkbox" 
      [checked]="preloadedNouns"
      (change)="preloadedNouns = !preloadedNouns; toggleData()"
      >
    </div>
    <div class="toggleDiv">
      <label>Your Nouns</label>
      <input id="yourNounsCheck" 
      type="checkbox" 
      [checked]="yourNouns"
      (change)="toggleData($event)"
      (change)="yourNouns = !yourNouns"

      >
    </div>

    <div class="toggleDiv">
      <label>All User Nouns</label>
      <input id="allUserNounsCheck" 
      type="checkbox" 
      [checked]="allUserNouns"
      (change)="toggleData($event)"
      (change)="allUserNouns =!allUserNouns"

      >
    </div>
    <!-- ADD NOUN COLLAPSE -->
    <app-add-person-form
    [user]='user'
    [(ngModel)]='allNouns'
    ></app-add-person-form>
  </div>```