html - Angular - TypeError: Ei voi lukea määritteen 'name' arvoa, koska se on määrittelemätön

En ole aivan varma, miten muotoilisin kysymyksen paremmin, mutta tarvitsen apua ymmärtämään, miten tämän voi ratkaista. Seuraava on virheeni:

  1. TypeError: _co.create is not a function
  2. TypeError: Cannot read property 'name' of undefined

Kun yritän käyttää newCategory.name HTML:ssä, se aiheuttaa nämä virheet konsolissa. Joten mielestäni ongelma on HTML:ssä.

newCategory määritellään tiedostossa CreateCategoryComponent.ts

newCategory: Category;
name: string;
description: string;

CategoryService.ts

 //ommitted some redundant code
 baseUrl: string = "api/Category";

 createCategory(newCategory: Category) : Observable<any> {

  //Not too sure if newCategory is added correctly here
  return this.httpClient.get<any>(this.baseUrl+"username="+this.sessionService.getUsername()+"&password="+this.sessionService.getPassword() + newCategory).pipe (
    catchError(this.handleError)
    );
  }

LuoKategoria.html

<td><input id="name" name="name" #name="ngModel" type="text" [(ngModel)]="newCategory.name" required="true" /></td>

Vastaus #1

HTML:ssäsi ei ole mitään vikaa.

Ongelma on newCategory: Category;, koska arvot eivät ole alustettu. Kaikki mitä teet tässä, on asettaa newCategory olemaan type of Category.

Voit alustaa newCategory seuraavilla tavoilla:

  1. Käyttäen new operaattoria
       newCategory: Category = new Category();
  1. Yleensä ilmoitan alkuperäisen tilan Category-mallin tiedostossa ja sitten tuon sen sopiviin tiedostoihin.
    export const initialState: Category = {
      name: '',
      description: ''
    };
  1. Alusta arvot komponentissa
    newCategory: Category = {
      name: '',
      description: ''
    };

Vastaus #2

Komponentillasi on 3 ominaisuutta:

  • uusiKategoria: Kategoria;
  • nimi: merkkijono;
  • kuvaus: merkkijono;

Sitten tarpeidesi mukaan asettaa/hakea attribuutin nimi, käytät: name.

<td><input id="name" name="name" #name="ngModel" type="text" [(ngModel)]="name" required="true" /></td>

Tai sinun täytyy lisätä name newCategory-objektiisi:

newCategory: Category = {
    name: string, 
    description: string
};

Ja käytä newCategory.name mallissasi:

<td><input id="name" name="name" #name="ngModel" type="text" [(ngModel)]="newCategory.name" required="true" /></td>

Toivottavasti tämä auttaa!