Толкая объект в angular

Question

Я пытаюсь набрать sh объектов для отображения в матрицах в angular. Так что на каждом входе есть карта, которая содержит три поля. Что у меня пока что не работает: я получаю сообщение об ошибке this.inputField.push is not a function at PostsComponent.getInput

my Html:

       <input type="text" placeholder="Your name"  name="name" id="inputField1" [(ngModel)]="inputField.name">
       <input type="text" placeholder="Department" name="department" id="inputField2" [(ngModel)]="inputField.department" >
       <textarea type="text" placeholder="Message" name="message" value="" id="inputField3" [(ngModel)]="inputField.message" ></textarea>
       <button  (click)="getInput()">Post</button>
   </mat-card> 

   <mat-card *ngIf= "hiddenList"  [notes] ="inputField" class="inputField"  >
        <ul *ngIf="show" >
                <li *ngFor= "let input of inputField">
                    {{inputField.name}}
                    {{inputField.department}}
                    {{inputField.message}}
                </li>
              </ul>
  <button type="button" (click)="removeList()">Delete</button>
   </mat-card>

Файл компонента Ts:

import { Component } from '@angular/core';
import { InputField } from '../posts/posts'

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.scss']
})
export class PostsComponent {
hiddenList=false

inputField: InputField[] = [];

getInput(){
     this.show = true
     this.inputField.push({'name':this.name, 'department':this.department, 'message':this.message})
     }

removeList(){
   this.hiddenList = true
  }
}

Post.ts:

export interface InputField{
 name: string,
 department: string, 
 message: string
}

Answer 1

Я проверил ваш код и обнаружил пару ошибок. Пожалуйста, найдите полный код здесь, я создал рабочий стек стека здесь - https://stackblitz.com/edit/angular-gw5rrv

Просто для вашего роста я перечисляю ошибки здесь:

• вы используете inputField с ngModel входов, что неверно. Поскольку мы хотим хранить значения в inputField Array, нам нужна другая переменная для связывания с ngModel (fieldData - это я создал).
• вам следует использовать входную переменную шаблона (input в вашем случае ) внутри * ngFor но вы используете inputField.
  • Я также удалил ненужный код
  • Я использовал div вместо mat-card только для простоты

Пожалуйста, дайте мне знать, если любые вопросы.

Answer 2

Вы привязываетесь к свойствам inputField, таким как inputField.name, inputField.department, но в объявлении вы говорите, что это массив. И затем вы инициализируете его пустым массивом.

У вас должно быть 2 свойства:

inputFields: InputField[] = [] 
inputField: InputField = {} 

для текущих данных, которые вы редактируете.

, а затем вы можете pu sh текущий отредактированный inputField для массива inputFields.

this.inputFields.push(this.inputField);

(мой предыдущий ответ был опущен, но я все еще думаю, что вы должны использовать; в конце ваших утверждений :-))

Answer 3

Попробуйте инициализировать вашу переменную в конструкторе.

constructor(){
    this.inputField = [];
}