Question

我正在尝试制作一个简单的页面，可以在其中添加一个值到数据库（仅包含ID和一个值）。我还想将数据库中的所有值显示到页面中。

代码运行良好，我可以添加和显示信息，但是我遇到了问题。

问题在于我被卡在了“加载中”。为了显示，我必须选择我的组件页面，然后转到另一个页面，最后回到我的页面，然后它可以工作。请注意，当我放置方法“ getData（）”而不使用服务时，它将正确显示。所以我认为我的问题是由于我的服务，但我不明白为什么。

这是我的html代码：

<h1> data to display : </h1>

<p *ngIf="!data"><em>Loading...</em></p>
<table class='table' *ngIf="data">
  <thead>
    <tr>
      <th>Id</th>
      <th>Nom</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let dataToDisplay of data">
      <td>{{ dataToDisplay.id }}</td>
      <td>{{ dataToDisplay.nom }}</td>
    </tr>
  </tbody>
</table>

<h1>add Data : </h1>
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
  <label for="name">Name</label>
  <input class="form-control" type="text" name="name" ngModel>
  <button class="btn btn-primary" type="submit" [disabled]="f.invalid">Enregistrer</button>
</form>

.ts文件：

import { Component } from '@angular/core';
import { ValuesService } from '../Services/values.service';
import { Person } from '../models/values-interface';
import { NgForm } from '@angular/forms';


@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
})
/** test component*/
export class TestComponent {
  /** test ctor */
  public data: any;
  constructor(private monService: ValuesService) { }
  ngOnInit() {
    this.data = this.monService.getData();
  }

  onSubmit(form: NgForm) {
    const name = form.value['name'];
    this.monService.postData(name);
  }
}

非常感谢您的帮助。

Answer 1

问题在于，只有在组件首次加载ngOnInit（）函数时，才会从后端刷新数据。如果要在添加新项目后从后端获得新的结果集，则必须通过调用

再次明确地刷新它。

 this.data = this.monService.getData();

再次

。

Answer 2

您的ValuesService应该返回Observable或Promise，然后您应该检查操作是否成功，以此类推，简化版本：

postData(data): Observable<any> {
    return this.http.post(url, JSON.strigify(data));
}

然后在您的组件中

onSubmit(form: NgForm) {
    const name = form.value['name'];
    this.monService.postData(name).subscribe(() => this.data = this.monService.getData());
}

Answer 3

这是答案：问题是我的服务必须返回如下所示的可观察到的内容（没有订阅）：

    export class ValuesService {
  values: any;
  public baseUrl: string = 'https://localhost:44343';

  constructor(private http: HttpClient) { }

  postData(data: string): Observable<any> {
    var formated_data: Person = { nom: data };
    return this.http.post<Person>(this.baseUrl + '/api/values', formated_data, httpOptions);
  }

  getData(): Observable<any> {
    return this.http.get(this.baseUrl + '/api/values');
  } 
}

然后，我的组件必须按如下所示订阅此可观察项：

    export class TestComponent {
  /** test ctor */
  public data: any ;
  public baseUrl: string = 'https://localhost:44343';

  constructor(private monService: ValuesService, private http: HttpClient) { }
  ngOnInit() {
    this.monService.getData().subscribe(result => this.data = result);
  }

  onSubmit(form: NgForm) {
    const name = form.value['name'];
    this.monService.postData(name).subscribe(result => this.data.push(result));
  }
}

请注意，函数this.data.push（result）用于将发布的值添加到实际页面中。我的控制器定义如下（C＃.net核心）：

[HttpPost]
public IActionResult PostValues([FromBody]Values data)
{
    _context.Values.Add(data);
    _context.SaveChanges();
    return Ok(data);
}

如何用角度刷新数据？

3 个答案: