javascript - Angular：让用户用表单创建对象

问题描述

我对 Angular 还是很陌生，我遇到了一个问题，我希望用户能够使用 String-Data 填写表单，然后应该创建一个要在列表中显示的对象。我不知道该怎么做，我发现的所有显示列表的教程和示例都使用 MockData 作为示例，所以我不知道如何将用户输入连接到列表显示。

这是列表中各个元素的代码 (.ts)：

import { Component, OnInit } from '@angular/core';
import { Project } from '../project';

@Component({
 selector: 'app-project',
 templateUrl: './project.component.html',
 styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit {
 openform = false;

 newProjectForm = this.formBuilder.group({
  name: '',
  pjNummer: '',
})

constructor(private formBuilder: FormBuilder) { }

ngOnInit() {
}

onSubmit() {
 this.openform = false;
 this.newProjectForm.reset();
 return this.openform;
}

onClickOpenForm() {
 this.openform=true;
 return this.openform;
}
}

和.html：

<div>
 <button (click)="onClickOpenForm()" 
 value="Register">Neues Projekt eintragen</button>
</div>
<div *ngIf="openform">
    <form [formGroup]="newProjectForm" (ngSubmit)="onSubmit()">
        <div>
            <label for="name">
            Projektname:
            </label>
            <input id="name" type="text" formControlName="name">
        </div>

        <div>
            <label for="pjNummer">
            PJ-Nummer:
            </label>
            <input id="pjNummer" type="text" formControlName="pjNummer">
        </div>
  
        <button (click)="onSubmit()"
        class="button" type="submit">Erstellen</button>
        
    </form>
</div>

以及列表本身的代码（.ts）：

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-project-list',
  templateUrl: './project-list.component.html',
  styleUrls: ['./project-list.component.css']
})
export class ProjectListComponent{

  projects: any[];
  
  constructor() {}
}

和.html：

<h2> Erstellte Projekte </h2>
<ul class="projects">
    <li *ngFor="let project of projects">
        <h3>{{project.name}}</h3>
        <div><span>Name: </span>{{project.name}}</div>
        <div><span>Pj-Nummer: </span>{{project.pjNummer}}</div>
    </li>
</ul>

所以基本上，我正在寻找一种将用户放入表单的数据的项目添加到“项目：任何 []”列表中的方法，只要提交表单，但我不知道怎么做.

标签： javascripthtmlangular

javascript - Angular：让用户用表单创建对象

问题描述

解决方案

推荐阅读