我已经创建了一个表单，在获得数据后，将其存储在数组中，并希望在表单下面的表中显示

Question

我创建了一个表单，在获得将其存储在数组中的数据后，我想将其显示在表单下面的表中。但我无法在表中显示数据，只有第一个值显示在表中。

这是我的应用程序组件代码

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

export interface Add{
title:string;
name: string;
category: string;
}

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
naam="Naman";
advertisment:Add[]=[];
localItem:any;
category = ['Furniture','Hardware','Mobile'];
tb=false;
constructor(){
//  if(this.localItem==null)
//  {
//    this.advertisment=[];
//  }
//  else{
//   this.advertisment=JSON.parse(this.localItem);
// }
}
ngOnInit(){
//this.advertisment=JSON.parse(this.localItem);
}
advertismentForm = new FormGroup({
title: new FormControl(''),
name:new FormControl(this.naam),
catgory:new FormControl('')
});

onSubmit(){
console.log(this.advertisment);
this.advertisment.push({
title:this.advertismentForm.get('title')?.value,
name:this.advertismentForm.get('name')?.value,
category:this.advertismentForm.get('catgory')?.value,

});
this.tb=true;
//localStorage.setItem("advertisment",JSON.stringify(this.advertisment));
}

dataSource=this.advertisment;
displayedColumns: string[] = ['title', 'name','category'];



}

这是我的html

<div class="container-fluid">
{{advertismentForm.value | json}} 

<h2>Advertisment Form</h2>
<form [formGroup]="advertismentForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Title</label>
<input formControlName="title" type="text" class="form-control" >
</div>       
<div class="form-group">
<label>Name</label>
<input formControlName="name" type="text" class="form-control">
</div>   
<div class="form-group">
<select formControlName="catgory" class="form-group">
<label>Category</label>
<option *ngFor="let cat of category" [value]="cat" class="form-control">{{cat}}</option>
</select>
</div>

<br>
<button class="btn btn-primary" type="submit">Register</button>
</form> 

<div>
<table mat-table #mytable [dataSource]="dataSource" *ngIf="tb" class="mat-elevation-z8">

<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->

<!-- Position Column -->
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef> Title </th>
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

<ng-container matColumnDef="category">
<th mat-header-cell *matHeaderCellDef> Category</th>
<td mat-cell *matCellDef="let element"> {{element.category}} </td>
</ng-container>


<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

</div>

</div>

正如您所看到的，数据正在进入数组，而不是在表中只获得第一个值。

Answer 1

将this.dataSource=this.advertising添加到ngOnInit((

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

export interface Add{
title:string;
name: string;
category: string;
}

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
naam="Naman";
advertisment:Add[]=[];
localItem:any;
category = ['Furniture','Hardware','Mobile'];
tb=false;
constructor(){
//  if(this.localItem==null)
//  {
//    this.advertisment=[];
//  }
//  else{
//   this.advertisment=JSON.parse(this.localItem);
// }
}
ngOnInit(){
this. dataSource=this.advertisment;
//this.advertisment=JSON.parse(this.localItem);
}
advertismentForm = new FormGroup({
title: new FormControl(''),
name:new FormControl(this.naam),
catgory:new FormControl('')
});

onSubmit(){
console.log(this.advertisment);
this.advertisment.push({
title:this.advertismentForm.get('title')?.value,
name:this.advertismentForm.get('name')?.value,
category:this.advertismentForm.get('catgory')?.value,

});
this.tb=true;
//localStorage.setItem("advertisment",JSON.stringify(this.advertisment));
}

dataSource=this.advertisment;
displayedColumns: string[] = ['title', 'name','category'];



}

你是我的html

<div class="container-fluid">
{{advertismentForm.value | json}} 

<h2>Advertisment Form</h2>
<form [formGroup]="advertismentForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Title</label>
<input formControlName="title" type="text" class="form-control" >
</div>       
<div class="form-group">
<label>Name</label>
<input formControlName="name" type="text" class="form-control">
</div>   
<div class="form-group">
<select formControlName="catgory" class="form-group">
<label>Category</label>
<option *ngFor="let cat of category" [value]="cat" class="form-control">{{cat}}</option>
</select>
</div>

<br>
<button class="btn btn-primary" type="submit">Register</button>
</form> 

<div>
<table mat-table #mytable [dataSource]="dataSource" *ngIf="tb" class="mat-elevation-z8">

<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->

<!-- Position Column -->
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef> Title </th>
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

<ng-container matColumnDef="category">
<th mat-header-cell *matHeaderCellDef> Category</th>
<td mat-cell *matCellDef="let element"> {{element.category}} </td>
</ng-container>


<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

</div>

</div>

Answer 2

您正在将新行推送到这个广告中，但在表中显示dataSource。在提交功能中推送新行后，添加此行：

this.dataSource = this.advertisement.slice()

这将更新用于表的数组上的引用，因此它应该检测到数据已更新。