html - Angular - שגיאת סוג: לא ניתן לקרוא את המאפיין 'name' של לא מוגדר

אני לא בטוח איך לנסח את השאלה בצורה טובה יותר, אבל אני צריך עזרה בהבנת איך לפתור את זה. השגיאה שלי היא:

1. TypeError: _co.create is not a function

2. TypeError: Cannot read property 'name' of undefined

כאשר אני מנסה להשתמש ב-newCategory.name ב-HTML, זה מציג את השגיאות האלה בקונסולה. לכן אני חושב שהבעיה נמצאת בתוך ה-HTML.

newCategory מוגדר ב-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)
    );
  }

צורקטגוריה.html

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

תשובה #1

אין שום דבר לא נכון ב-HTML שלך.

הבעיה היא newCategory: Category; מכיוון שהערכים אינם מאותחלים. כל מה שאתה עושה כאן הוא להגדיר את newCategory להיות type of Category.

אתה יכול לאתחל את newCategory בדרכים הבאות:

1. שימוש במפעיל new

       newCategory: Category = new Category();

2. בדרך כלל אני מכריז על מצב התחלתי בקובץ המודל של הקטגוריה ואז מייבא אותו לקבצים המתאימים.

    export const initialState: Category = {
      name: '',
      description: ''
    };

3. אתחול ערכים ברכיב

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

תשובה #2

לרכיב שלך יש 3 תכונות:

• קטגוריה חדשה: קטגוריה;
• שם: מיתר;
• תיאור: מיתר;

לאחר מכן, לצורך הגדרת/קבלת המאפיין name, תשתמש ב: name.

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

או שאתה צריך להוסיף name לאובייקט newCategory שלך:

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

והשתמש ב-newCategory.name בתבנית שלך:

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

מקווה שזה יעזור!