ngFor 没有显示任何数据

Question

我正在尝试使用Angular 6 将一些数据绑定到模板，所以这是ngOnInit：

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
        this.id = +params['id'];
    });
    let url = this.baseUrl + `/items/${this.id}`;
    this.httpClient.get(url).subscribe((data : Array<any>)=> {
        this.ItemToEdit = data;
    });
}

这是模板：

<div *ngFor="let item of ItemToEdit?.results">
              <div class="col-sm-8 float-left">

                <mat-form-field> <input matInput
                  class="form-control" placeholder="Item name"
                  formControlName="name" id="ItemName" value='{{ item.name }}'>
                </mat-form-field>

              </div>
</div>

变量ItemToEdit如下：

{
  "results": [
    {
      "alias": [
        "first"
      ], 
      "apps": [], 
      "description": "this is an item", 
      "id": 1, 
      "name": "item342"
    }
  ]
}

所以，问题是当我打开模板（通过某个按钮）时，没有显示具有 ngFor 指令的 HTML（具有 ngFor 的 div 变为空白）。我不知道如何显示数据...变量ItemToEdit 只有一个值（长度= 1），但由于它有一个名为results 的嵌套数组，我通过for 循环显示数据。当我尝试在打字稿中做这样的事情时：

  this.loadedName = this.ItemToEdit.results[0].name;

我收到一条错误消息，提示 ItemToEdit.results 未定义

有什么想法吗？

编辑

发现我的代码有效，但只有在刷新页面后...

服务器间歇性地返回这样的响应而不是预期的结果：

• { "error": "(_mysql_exceptions.OperationalError) (2006, 'MySQL server has gone away') [SQL: 'SELECT .... }
• { "error": "(_mysql_exceptions.ProgrammingError) (2014, \"Commands out of sync; you can't run this command now\") [SQL: 'SELECT ......" }

================ 编辑 2 ===============

我得到了 Mysql 异常，因为我在 ngOnInit 中创建了另一个 httpRequest 来填充数据库中的选择字段...。 删除该请求后，我的代码工作正常。

Answer 1

您现有的ngOnInit 方法有问题：

1. 在this.id 有机会被设置之前读取this.id。
2. this.ItemToEdit 更改时不会更新 this.id。
3. this.id 可能与当前加载数据的实际 ID 不匹配。

以下建议的实现通过以下方式解决了这些问题：

1. 等到检索到 ID 后再发出 HTTP 请求，
2. 仅当this.ItemToEdit 中有数据时才更新this.id，并且
3. 如果 ID 在完成之前发生更改，则取消任何待处理的 HTTP 请求。

ngOnInit() {
    let itemToEditID;
    const httpObservable = this.route.params.pipe(
        map(params => +params['id']),
        tap(newID => itemToEditID = newID),
        switchMap(newID => this.httpClient.get(`${this.baseUrl}/items/${newID}`))
    );
    this.sub = httpObservable.subscribe(data => {
        this.id = itemToEditID;
        this.ItemToEdit = data;
    });
}

将<pre>{{ ItemToEdit | json }}</pre> 放置在模板中的某处可让您检查服务器的实际输出，从而识别来自服务器的常见错误。

关于这些错误的好消息是它们是由服务器而不是您的代码引起的。坏消息是您需要确定服务器出了什么问题以及如何解决该问题——但这是另一个问题的主题。

根据您的需要，您可能希望在发生错误时在页面上输出服务器错误：

<div *ngIf="ItemToEdit?.error" class="danger">
    <h2>An error occurred while trying to retrieve item {{ id }}</h2>
    <p>{{ error }}</p>
</div>
<div *ngFor="let item of ItemToEdit?.results">
    <!-- ... -->
</div>

Answer 2

尽量让你的所有进程保持异步

<div *ngFor="let item of (itemToEdit$ | async)">
    <div class="col-sm-8 float-left">

    <mat-form-field> <input matInput
      class="form-control" placeholder="Item name"
      formControlName="name" id="ItemName" value='{{ item.name }}'>
    </mat-form-field>

    </div>
</div>

在您的组件中：

private itemToEdit$: Observable<any>;

....

ngOnInit() {
    this.route.params.subscribe(params => {
        this.id = +params['id'];
        let url = this.baseUrl + `/items/${this.id}`;
        this.itemToEdit$ = this.httpClient.get(url).pipe(
          map(data => data['results'])
        );
    });
}

Answer 3

test: any = [];  
ngOnInit() {
        this.service.test().subscribe(res => {
          this.test = res.results;
        });

HTML：

 <p *ngFor="let test of this.test">
   {{test.name}}
 </p>

如果您需要将其绑定到输入字段，只需将其分配为：[value]="test?.name"

服务：

test(): Observable<any>{
return this.http.get(url);
}

Answer 4

首选的解决方案是使用 antoine-clavijo 的答案中定义的async。

或者，如果您的组件（或父组件）是使用 ChangeDetectionStrategy.OnPush 定义的，例如：

@Component({
  selector: 'app-component',
  templateUrl: './config.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

...您可以告诉 Angular 组件需要更新，如下所示：

constructor(
  private ref: ChangeDetectorRef, 
  private httpClient: HttpClient) {}

ngOnInit() {
  this.sub = this.route.params.subscribe(params => {
    this.id = +params['id'];
  });
  const url = this.baseUrl + `/items/${this.id}`;
  this.httpClient.get(url).subscribe((data: Array<any>)=> {
    this.ItemToEdit = data;
    this.ref.detectChanges();
  });
}