标签: angular-ngfor

我创建了一个角度应用程序,它从json文件中获取数据.但我在使用html显示数据时遇到问题.很多变量都在荷兰语中,我很抱歉.我对这一切也有点新意:)

这是我的服务:

import {Injectable} from '@angular/core';
import {Http, RequestOptions, Response, Headers} from '@angular/http';
import {Observable} from "rxjs";
import {Afdelingen} from "./models";

@Injectable()
export class AfdelingService {
  private afdelingenUrl = '/assets/backend/afdelingen.json';
    constructor(private http: Http) {
      }

      getAfdelingen(): Observable<Afdelingen[]> {
        return this.http.get(this.afdelingenUrl)
          .map(this.extractData)
          .catch(this.handleError);
      }

      private extractData(res: Response) {
        let body = <Afdelingen[]>res.json();
        return body || {};
      }

      private handleError(error: any): Promise<any> {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
      }

      addAfdeling(afdelingsNaam: string, afdeling: any): Observable<Afdelingen> {
        let body = JSON.stringify({"afdelingsNaam": …

我的 Angular 6 应用程序需要显示一个表格列表，其中一个表格是对其组成元素的一组化学分析。

假设我有一个金属合金A。我对其进行了不同的化合物分析以找出其化学成分：Fe：0.001%、Cu：0.042% 等。

这是我的数据源，它只是一个带有模拟的打字稿文件

import { Certificate } from './certificate';

export const CERTIFICATES: Certificate[] = [
    { serie: '1050 AJ', ident: 'Fe', moy_certified: 0.297 },
    { serie: '1050 AJ', ident: 'Cu', moy_certified: 0.04 },
    { serie: '1050 AJ', ident: 'Mn', moy_certified: 0.0374 }, 
    { serie: 'X332.0 AC', ident: 'V', moy_certified: 0.019 },
    { serie: 'X4002 AA', ident: 'Mn', moy_certified: 0.037 }
];

我想使用 Angular 6 在 HTML 中显示这些数据，在表格​​列表中，其中一个系列的每个分析按如下方式分组：

Serie: 1050 AJ
-------------------------
| Element | …

我有一个结构如下的对象列表：

[{item},{item},{item}]

我正在尝试创建一个带有角度的复选框列表，如下所示：

<form>
     <input *ngFor="let object of objects" type="checkbox"> {{object.name}}
</form>

复选框本身确实显示了，但我无法获取每个复选框中显示的对象的名称。我究竟做错了什么？

我有一个小节，我想知道如何html在每个小节之间放置分隔线，但不知道如何做到这一点，所以如果我能得到任何建议或帮助，我将不胜感激。

<div>
    <a mat-list-item *ngFor="let subsection of section.subSections" (click)="navigateToSubsection(section.id,subsection.id)">{{subsection.sectionName}}
    </a>
</div>

例如这样的事情：