Question

我是angel的初学者，并开发了一个小型应用程序。当我启动并转到地址http://localhost:4200/时，结果如下：

> <!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>

文件index.html如下：

<!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>
</body>
</html>

app.module.ts文件如下

import { AppRoutingModule } from './app-routing.module';
import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppProduitImmobilierDetailsComponent } from './app-produit-immobilier-details/app-produit-immobilier-details.component';

@NgModule({
  declarations: [
    AppComponent,
    AppProduitImmobilierDetailsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts文件如下

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];
  }
}

app.component.html文件如下

<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>

总而言之，“ app-root”标签中什么都没有显示请问你能帮帮我吗？谢谢

Answer 1

很抱歉添加评论以回答我的问题，但我必须加入firefox Web控制台的图片才能向您显示记录的错误

启动应用程序时，未填充<app-root>

1 个答案: