Почему не отображаются данные?

Question

[lolik20]

Angular не выводит данные из запроса. Запрос работает нормально. В чём проблема?

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { IndexComponent } from './index/index.component'
@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent,
    IndexComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'index', component: IndexComponent },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

index.component.ts

import { Component, OnInit } from '@angular/core';
import { RouteService } from '../services/route.service';
import { RoutesViewModel } from '../models/specialModels/routesViewModel';


@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  providers: [RouteService]
})
export class IndexComponent implements OnInit {

  route: RoutesViewModel = new RoutesViewModel();   // изменяемый товар
  routes: RoutesViewModel[];                // массив товаров
  tableMode: boolean = true;          // табличный режим

  constructor(private dataService: RouteService) { }

  ngOnInit() {
    this.loadRoutes();    // загрузка данных при старте компонента
  }
  // получаем данные через сервис
  loadRoutes() {
    this.dataService.getRoutes()
      .subscribe((data: RoutesViewModel[]) => this.routes = data);
  }
}

index.component.html

<table *ngIf="tableMode" class="table table-striped">
  <thead>
    <tr>
      <td>Из</td>
      <td>В</td>
      <td>ID пользователя</td>
      <td>Номер телефона</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let r of routes">
      <ng-template >
        <td>{{r?.startPoint}}</td>
        <td>{{r?.endPoint}}</td>
        <td>{{r?.userId}}</td>
        <td>{{r?.userPhone}}</td>
      </ng-template>
    </tr>
  </tbody>
</table>

RoutesViewModel.ts

export class RoutesViewModel {
  constructor(
    public startPoint?: string,
    public endPoint?: string,
    public userId?: number,
    public userPhone?:string) { }
}

route.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { RoutesViewModel } from '../models/specialModels/routesViewModel';
 
@Injectable()
export class RouteService {
 
    private url = "/api/Route/";
 
    constructor(private http: HttpClient) {
    }

    getRoutes() {
        return this.http.get(this.url+'all');
    }
}

Answer 1

[Oleksandr Fedorov]

а зачем тут ng-template?

Comments

[Антон Швец]

чтобы скрыть содержимое и не выводить данные :)

[lolik20]

После того как убрал проект не запускается

[lolik20]

изменил вот такl, не работает

[Oleksandr Fedorov]

<tr *ngFor="let r of routes">
    <td>{{r?.startPoint}}</td>
    <td>{{r?.endPoint}}</td>
    <td>{{r?.userId}}</td>
    <td>{{r?.userPhone}}</td>
</tr>

я бы писал так, а потом бы смотрел на ошибки, если бы оно не запускалось