Angular 启动应用程序时，<；应用程序根>；还没有填满
我是angular的初学者，正在开发一个小应用程序。当我启动它去地址的时候， 结果如下：Angular 启动应用程序时，<；应用程序根>；还没有填满,angular,Angular,我是angular的初学者，正在开发一个小应用程序。当我启动它去地址的时候， 结果如下： > <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> > <title>DemoImmobilierFront</title> <base href="/"> <meta > name="viewport"
> <!doctype html>
<html lang="en"> <head> <meta charset="utf-8">
> <title>DemoImmobilierFront</title> <base href="/"> <meta
> name="viewport" content="width=device-width, initial-scale=1"> <link
> rel="icon" type="image/x-icon" href="favicon.ico"> <link
> href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"
> rel="stylesheet"> <link
> href="https://fonts.googleapis.com/icon?family=Material+Icons"
> rel="stylesheet"> </head>
<body>
<app-root></app-root>
<script
> src="runtime.js" type="module"></script><script src="polyfills.js"
> type="module"></script><script src="styles.js"
> type="module"></script><script src="vendor.js"
> type="module"></script><script src="main.js"
> type="module"></script>
</body>
</html>
import { Component } from '@angular/core';
import {ProduitImmobilierDTO} from './produit-immobilier-dto';
import {AppServiceService} from './app-service.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: [AppServiceService]
})
export class AppComponent {
title = 'demoImmobilierFront';
public annonces: ProduitImmobilierDTO[];
constructor(private service: AppServiceService) {}
ngOnInit() {
const produitImmobilierDTO1 = ProduitImmobilierDTO.fromJson(
{ id: 1,
type: 'type1',
telephone: '0622136822',
nbrLots: '1',
isParking: true,
isLift: false,
dpe: 'dpe1',
chargesCoprop: 100,
taxeFonciaire: '101',
dateConstruction: new Date(),
adresse: 'adresses1',
prix: 102,
surface: 103,
surfaceBalcon: 104,
surfaceTerrasse: 105,
surfaceVerandas: 106,
surfaceSousSol: 107,
surfaceCave: 108,
surfaceLogias: 109,
autreSurfaceAnnexe: 110
});
const produitImmobilierDTO2 = ProduitImmobilierDTO.fromJson(
{ id: 2,
type: 'type2',
telephone: '1733247933',
nbrLots: '2',
isParking: false,
isLift: true,
dpe: 'dpe2',
chargesCoprop: 200,
taxeFonciaire: '201',
dateConstruction: new Date(),
adresse: 'adresses2',
prix: 202,
surface: 203,
surfaceBalcon: 204,
surfaceTerrasse: 205,
surfaceVerandas: 206,
surfaceSousSol: 207,
surfaceCave: 208,
surfaceLogias: 209,
autreSurfaceAnnexe: 210
});
this.annonces = [produitImmobilierDTO1,produitImmobilierDTO2];
}
}
<div class="col-md-6">
<h2> List of Annonces</h2>
<div *ngFor="let annonce of annonces; let i = index">
<div class="card">
<img src="assets/image{{i}}.jpg" alt="Avatar" style="float:left;width:100%">
<div class="container">
<h4><b>{{annonce.type}}</b></h4>
<h4><b>{{annonce.dateConstruction}}</b></h4>
<h4><b>{{annonce.adresse}}</b></h4>
<h4><b>{{annonce.prix}}</b></h4>
<h4><b>{{annonce.surface}}</b></h4>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>
import { Component } from '@angular/core';
import {ProduitImmobilierDTO} from './produit-immobilier-dto';
import {AppServiceService} from './app-service.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: [AppServiceService]
})
export class AppComponent {
title = 'demoImmobilierFront';
public annonces: ProduitImmobilierDTO[];
constructor(private service: AppServiceService) {}
ngOnInit() {
const produitImmobilierDTO1 = ProduitImmobilierDTO.fromJson(
{ id: 1,
type: 'type1',
telephone: '0622136822',
nbrLots: '1',
isParking: true,
isLift: false,
dpe: 'dpe1',
chargesCoprop: 100,
taxeFonciaire: '101',
dateConstruction: new Date(),
adresse: 'adresses1',
prix: 102,
surface: 103,
surfaceBalcon: 104,
surfaceTerrasse: 105,
surfaceVerandas: 106,
surfaceSousSol: 107,
surfaceCave: 108,
surfaceLogias: 109,
autreSurfaceAnnexe: 110
});
const produitImmobilierDTO2 = ProduitImmobilierDTO.fromJson(
{ id: 2,
type: 'type2',
telephone: '1733247933',
nbrLots: '2',
isParking: false,
isLift: true,
dpe: 'dpe2',
chargesCoprop: 200,
taxeFonciaire: '201',
dateConstruction: new Date(),
adresse: 'adresses2',
prix: 202,
surface: 203,
surfaceBalcon: 204,
surfaceTerrasse: 205,
surfaceVerandas: 206,
surfaceSousSol: 207,
surfaceCave: 208,
surfaceLogias: 209,
autreSurfaceAnnexe: 210
});
this.annonces = [produitImmobilierDTO1,produitImmobilierDTO2];
}
}
<div class="col-md-6">
<h2> List of Annonces</h2>
<div *ngFor="let annonce of annonces; let i = index">
<div class="card">
<img src="assets/image{{i}}.jpg" alt="Avatar" style="float:left;width:100%">
<div class="container">
<h4><b>{{annonce.type}}</b></h4>
<h4><b>{{annonce.dateConstruction}}</b></h4>
<h4><b>{{annonce.adresse}}</b></h4>
<h4><b>{{annonce.prix}}</b></h4>
<h4><b>{{annonce.surface}}</b></h4>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>
注释列表
{{annonce.type}
{{annonce.dateConstruction}
{{annonce.adrese}}
{{annonce.prix}
{{annonce.surface}}
你能帮我吗？谢谢很抱歉添加一条评论来回答我的问题，但我必须加入我的firefox web控制台的图片来向您显示记录的错误
对于这样一个基本问题，您的应用程序中已经有大量数据、业务逻辑和服务。您能否减少代码，使app.component.html只显示一个简单的Hello World？为了尝试，请从app.component中删除该服务。最后：浏览器控制台中是否有日志输出？控制台中是否有任何错误，添加stackblitz url将很容易解决您的问题。嗨Torben，嗨Indrakumara，非常感谢您的回复。我在stackblitz（）中复制了我的代码，它可以正常工作。我看不出错误在哪里。你能帮个忙吗？PS：对不起，Torben，我已经超越了一个简单的hello world应用程序。我补充说Indrakumara使用stackblitz的想法是一个很好的想法。我发现了这个错误：当我使用Httpclient时，我忘了在AppModule中添加HttpClientModule。关闭