Question

我有一个这样的对象数组：

 export class YourComponent {
 private gridApi;
 private gridColumnApi;
   .
   . 
 onRowValueChanged: function(event) {
   console.log(event) // access the entire event object
   console.log(event.data) // access and print the updated row data
   const gridData = this.getAllData();
   // api call to save data

}

getAllData() {
  let rowData = [];
  this.gridApi.forEachNode(node => rowData.push(node.data));
  return rowData;  
}

onGridReady(params) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;
}

我从组件中的服务中读取了该信息：

[{
  position: "Software Developer",
  company: "Big company",
  details: [
    "task1","task2,"task3"
  ]
},
{
  position: "Software Developer",
  company: "Another Big company",
  details: [
    "task1a","task2a,"task3a"
  ]
}]

在我的html中，我遍历此数组，但在循环中，我也想遍历详细信息。我已经尝试了包括以下方法在内的几种方法，但是我真的不明白这里的工作原理。如何正确处理？

ngOnInit() {
    this.data.getExperience().subscribe(
      data => this.experience$ = data
    )
  }

Answer 1

如果属性名称包含一个Observable值，通常在属性名称后加上

$后缀。这是按照Angular Guide here中所述的命名约定完成的：

由于Angular应用程序大多数是用TypeScript编写的，因此通常您会知道变量何时是可观察的。尽管Angular框架没有对可观察对象强制执行命名约定，但是您经常会看到可观察对象的名称后面带有“ $”符号。

这在扫描代码并查找可观察的值时很有用。另外，如果您希望属性存储可观察到的最新值，则可以方便地使用带有或不带有“ $”的相同名称。

由于您已经subscribing到Observable并且experience$将不是Observable而是一个数组，因此您应该考虑对属性进行不同的命名。

不使用$尝试此操作。

li也不包含在ul中。因此，请通过以下操作对其进行修复：

<li *ngFor='let experience of experiences'>
  <!--<a routerLink='/details/{{ user.id }}'>{{ user.name }}</a>-->
  <ul>
    <li class="position">{{ experience.position }}</li>
    <!--<li><a href='http://{{ user.website }}'>{{ user.website }}</a></li>-->
    <li class="company">{{ experience.company}}<span class="dates">  {{ experience.dates}}</span></li>
    <ul class="details" *ngFor='let d of experience.details'>
      <li>{{ d }}</li>
    </ul>

  </ul>
</li>

还可以在您的组件类中进行此更改：

import { Component } from '@angular/core';
import { DataService } from './data.service';

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

  experiences: any[];

  constructor(private data: DataService) {}

  ngOnInit() {
    this.data.getExperience().subscribe(
      data => this.experiences = data
    )
  }
}

这是您推荐的Working Sample StackBlitz。

Answer 2

您有错别字，只需在$之后删除details。另外，请勿对不可观察变量使用$，因为此命名约定通常用于标识可观察变量。

<li *ngFor='let experience of experience$'>
    <!--<a routerLink='/details/{{ user.id }}'>{{ user.name }}</a>-->
    <ul>
      <li class="position">{{ experience.position }}</li>
      <!--<li><a href='http://{{ user.website }}'>{{ user.website }}</a></li>-->
      <li class="company">{{ experience.company}}<span class="dates">  {{ experience.dates}}</span></li>
      <ul class="details" *ngFor='let d of experience.details'></ul>
        <li>{{ d }}</li>
    </ul>
  </li>

遍历对象中的数组参数

2 个答案: