Angular应用程序不更新是前端的，虽然在数据库中工作得很好

Question

我试图使一个Crud应用程序在角，但同时添加的数据(要求)通过表单它正在更新数据库，但不显示在前端(表在我的情况下没有创建)

add-requirement-component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Requirement } from '../requirement';
import { RequirementService } from '../requirement.service';
@Component({
selector: 'app-add-requirement',
templateUrl: './add-requirement.component.html',
styleUrls: ['./add-requirement.component.css']
})
export class AddRequirementComponent implements OnInit {
requirement: Requirement = new Requirement();
constructor(private requirementService: RequirementService,
private router: Router) { }
ngOnInit(): void {
}
saveRequirement(){
this.requirementService.addRequirement(this.requirement).subscribe(data =>{
console.log(data);
this.goToRequirementList();
},
error => console.log(error));
}
goToRequirementList(){
this.router.navigate(['/requirements'])
}
onSubmit(){
console.log(this.requirement);
this.saveRequirement();
}
}

add-requirement.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AddOfferComponent } from './add-offer.component';
describe('AddOfferComponent', () => {
let component: AddOfferComponent;
let fixture: ComponentFixture<AddOfferComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AddOfferComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AddOfferComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

add-requirement.component.html

<div class ="col-md-6 offset-md-3">
<h2> Add Requirement</h2>
<form (ngSubmit) = "onSubmit()">
<div class = "form-group">
<label> Title </label>
<input type="text" class = "form-control" id = "title"
[(ngModel)] = "requirement.title" name = "title">
</div> <br>
<div class = "form-group">
<label> Description </label>
<input type="text" class = "form-control" id = "description"
[(ngModel)] = "requirement.description" name = "description">
</div> <br>
<div class = "form-group">
<label> Category </label>
<input type="text" class = "form-control" id = "category"
[(ngModel)] = "requirement.category" name = "category">
</div> <br>
<div class = "form-group">
<label> Type </label>
<input type="text" class = "form-control" id = "type"
[(ngModel)] = "requirement.type" name = "type">
</div> <br>
<div class = "form-group">
<label> Price </label>
<input type= "number" class = "form-control" id = "price"
[(ngModel)] = "requirement.price" name = "price">
</div> <br>
<div class = "form-group">
<label> Employee Id </label>
<input type= "number" class = "form-control" id = "empId"
[(ngModel)] = "requirement.empId" name = "empId">
</div> <br>
<div class = "form-group">
<label> Is Available </label>
<input type= "text" class = "form-control" id = "isAvailable"
[(ngModel)] = "requirement.isAvailable" name = "isAvailable">
</div> <br>
<div class = "form-group">
<label> Available Upto </label>
<input type= "date" class = "form-control" id = "availableUpto"
[(ngModel)] = "requirement.availableUpto" name = "availableUpto">
</div> <br>
<button class = "btn btn-success" type="submit"> Add </button>
</form>
</div>

又来了一个组件requirement-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Requirement } from '../requirement';
import { RequirementService } from '../requirement.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-requirement-list',
templateUrl: './requirement-list.component.html',
styleUrls: ['./requirement-list.component.css']
})
export class  RequirementListComponent implements OnInit {
requirements:  Requirement[];
constructor(private  requirementService:  RequirementService,
private router: Router) { }
ngOnInit(): void {
this.getRequirements();
}
private getRequirements(){
this.requirementService.getRequirementList().subscribe(data => {
this.requirements = data;
})
}
updateRequirement(resId: number){
this.router.navigate(['update-requirement', resId]);
}
}

requirement-list.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RequirementListComponent } from './requirement-list.component';
describe('RequirementListComponent', () => {
let component: RequirementListComponent;
let fixture: ComponentFixture<RequirementListComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ RequirementListComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(RequirementListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

requiremnt-list.component.html

<h2>Requirement List</h2>
<table class="table table-striped">
<thead>
<tr>
<th> Resource Id</th>
<th> Category</th>
<th> Type</th>
<th> Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor = "let requirement of requirements">
<td>{{ requirement.resId}}</td>
<td>{{ requirement.category}}</td>
<td>{{ requirement.type}}</td>
<td>
<button (click) = "updateRequirement(requirement.resId)" class = "btn btn-info"> Update</button>
</td>
</tr>
</tbody>
</table>

app.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddRequirementComponent } from './add-requirement/add-requirement.component';
import { RequirementListComponent } from './requirement-list/requirement-list.component';
import { UpdateRequirementComponent } from './update-requirement/update-requirement.component';
const routes: Routes = [
{path: '', redirectTo: 'requirements', pathMatch: 'full'},
{path: 'requirements', component: RequirementListComponent},
{path: 'add-requirement', component: AddRequirementComponent},
{path: 'update-requirement/:resId', component: UpdateRequirementComponent}

];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RequirementListComponent } from './requirement-list/requirement-list.component';
import { AddRequirementComponent } from './add-requirement/add-requirement.component';
import { FormsModule } from '@angular/forms';
import { UpdateRequirementComponent } from './update-requirement/update-requirement.component';
@NgModule({
declarations: [
AppComponent,
RequirementListComponent,
AddRequirementComponent,
UpdateRequirementComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

requirement.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Requirement } from './requirement';
@Injectable({
providedIn: 'root'
})
export class RequirementService {
private baseURL = "http://localhost:2021/getallrequirements";
private URL1 = "http://localhost:2021/addRequirement";
private URL2 = "http://localhost:2021/updatereq";
private URL3 = "http://localhost:2021/getreq{resId}";


constructor(private httpClient: HttpClient) { }
getRequirementList(): Observable<Requirement[]>{
return this.httpClient.get<Requirement[]>(`${this.baseURL}`)
}
addRequirement(requirement: Requirement): Observable<Object>{
return this.httpClient.post(`${this.URL1}`, requirement);
}
getRequirementByresId(resId: number): Observable<Requirement>{
return this.httpClient.get<Requirement>(`${this.URL3}/${resId}`);
}
updateRequirement(resId: number, requirement: Requirement): Observable<Object>{
return this.httpClient.put(`${this.URL2}/${resId}`, requirement);
}
}

requirement.ts

export class Requirement {
resId: number;
title: string;
description: string;
category: string;
type: string;
price: number;
empId: number;
isAvailable: string;
availableUpto: string;
}

Answer 1

您是否检查了浏览器或数据库的日志中GET上的任何错误?也许那里出了什么问题?

尝试直接在模板中使用异步管道，而不是在组件中订阅，因为你使用的是可观察对象:

requirement-list.component.ts

{
...
// asign the observable directly to variable and use with async pipe in template
requirements$ = this.requirementService.getRequirementList(); 
constructor(private  requirementService:  RequirementService,
private router: Router) { }
ngOnInit(): void {
// no separate function needed for async pipe call
}
updateRequirement(resId: number){
this.router.navigate(['update-requirement', resId]);
}
}

requirement-list.component.html

...
<tbody>
<tr *ngFor = "let requirement of requirements$ | async">
<td>{{ requirement.resId}}</td>
...