Question

我有一个GET方法，该方法在路线localhost:3000/documents上返回以下JSON

[{
"id": "5b48bffc644fca001419769c",
"names": [{
        "name": "bob"
    },
    {
        "name": "stan"
    }
],
"cities": [{
        "city": "London"
    },
    {
        "city": "Madrid"
    }
]
}]

我想连接所有名称和城市，并使用Angular将它们显示在HTML标记中。

<p> id </p>
<p> concatenated names here </>
<p> concatenated cities here </>

是否可以使用ngFor访问文档并连接数组值？

我有以下内容：

import {Component, OnInit} from '@angular/core';
import {DocumentService} from '../services/document.service';
import {Document} from './document.model';

@Component({
  selector: 'app-document',
  templateUrl: './document.component.html',
  styleUrls: ['./document.component.css']
})
export class DocumentComponent implements OnInit {
  documents: Document[];

  constructor(private documentService: DocumentService) {
  }

  ngOnInit() {
    this.getDocuments();
  }

  getDocuments(): void {
    this.documentService.getDocuments()
      .subscribe(documents => this.documents = documents);
  }
}

以及以下服务：

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';

import {Document} from '../document/document.model';

@Injectable({providedIn: 'root'})
export class DocumentService {

  private urlDocuments = 'localhost:3000/documents';

  constructor(private http: HttpClient) {
    }

  getDocuments() {
      return this.http.get<Document[]>(this.urlDocuments);
  }
}

我的文档模型是：

export class Document {
  public _id: string;
  public names: [{ name: string }];
  public cities: [{ city: string }];

  constructor(_id: string, names: [{ name: string }], 
      cities: [{ city: string }]]) {
  this._id = _id;
  this.cities=cities;
  this.names= name;    
  }
}

Answer 1

我有解决方案，但是您需要修改您的对象。

您必须为模型中的城市和名称覆盖toString方法：

test= [{
    "id": "5b48bffc644fca001419769c",
    "names": [{
      "name": "bob",
      toString: function(){return this.name;}
    },
      {
        "name": "stan",
        toString: function(){return this.name;}
      }
    ],
    "cities": [{
      "city": "London",
      toString: function(){return this.city;}

    },
      {
        "city": "Madrid",
        toString: function(){return this.city;}

      }
    ]
  }];

HTML部分如下所示：

<div *ngFor="let t of test">
  <p> {{t.id}}</p>
  <p> {{t.names.join(",")}}</p>
  <p> {{t.cities.join(",")}} </p>
</div>

输出：

5b48bffc644fca001419769c

bob,stan

London,Madrid

Answer 2

假设您的django 1.11数据在服务器上没有问题，请尝试以下documents代码：

HTML

Answer 3

您只需要使用*ngFor来遍历文档，然后使用两个*ngFor来遍历names和{{ 1}}像这样（StackBlitz Demo）：

ts ：

cities

html ：

  documents = [{
    "id": "5b48bffc644fca001419769c",
    "names": [{"name": "bob"},{"name": "stan"}],
    "cities": [{"city": "London"},{"city": "Madrid"}]
  },{
    "id": "5b48bffc644fca001419769cde",
    "names": [{"name": "Jon"},{"name": "Doe"}],
    "cities": [{"city": "Barcelona"},{"city": "Saragoza"}]
  }
  ];

输出：

如何使用ngFor遍历JSON嵌套对象

3 个答案: