angular - 对待 API Angular 4

Question

对待 Angular API 4

在 html 中的 Angular 4 应用程序中，我从 API 检索数据。例如，如果在 api "id: 2" 中，我如何在 HTML 中显示 "home"？

我应该把这个指令放在哪里？我是 Angular 的超级初学者，我不知道该怎么做。

代码：

组件.html：

<div class="cartao"> 
    <div *ngFor="let comunicado of comunicados">
<div class="card{{comunicado.type}}">
    <div class="cardUnt">
        <ul>
            <li>
                <input type="checkbox" checked>
                <h4>
                    <b>
                        <span class="nome1">{{comunicado.title}}</span>
                        <span class="nome2">{{comunicado.id}}</span>
                    </b>
                </h4>
                <span class="tag" id="tipo">{{comunicado.type}}</span>
                <span class="dataHora">{{ comunicado.date}}</span>
                <p class="descript">{{ comunicado.description}}</p>
                <p class="fullDescript">{{ comunicado.fullDescription}}</p>
            </li>
        </ul>
    </div>
</div>
</div>

组件.ts：

import { Component, OnInit, Input } from '@angular/core';
import { Comunicado } from './comunicado.model';
import { ComunicadosService } from './comunicados.service';

@Component({
    selector: 'app-cards',
    templateUrl: 'src/app/cards/cards.component.html',
    styleUrls: ['src/assets/styles/estilosGerais.css'],
})

export class CardsComponent implements OnInit{

    @Input() comunicado: Comunicado
    comunicados: Comunicado[] = []

    constructor(private comunicadosService: ComunicadosService) {}

    ngOnInit() {
        this.comunicadosService.comunicados()
        .subscribe(comunicados => this.comunicados = comunicados)
    }
}

服务.ts：

import { Injectable } from '@angular/core'
import { HttpClient } from "@angular/common/http"
import { Observable } from "rxjs/Observable"
import { Comunicado } from './comunicado.model'
import { COMUNIC_API } from '../app.api'
import 'rxjs/add/operator/map'

@Injectable()
export class ComunicadosService {

    constructor(private http: HttpClient){}

    comunicados(): Observable<Comunicado[]> {
        return this.http.get<Comunicado[]>(`${COMUNIC_API}/comunicados`);
    }
}

部分api：

{
    "comunicados": [
        {
            "id": 1,
            "title": "text",
            "seen": false,
            "type": 0,
            "description": "text.",
            "fullDescription":"text.",
            "date": "2018-05-03 8:30"
        },

标签： angular