从服务传递后，模板中未提供来自 Angular 服务的数据

Question

使用 Django 创建 API 后端后，我尝试获取一个 Angular 组件来显示提供的数据，以创建所有获取的数据集的列表。

我能够在 service.spec.ts 中运行测试，并验证数据是否从后端正确获取

我在 Angular v.17 语法上遇到了一些困难，所以也许问题很简单。

这是代码：

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProjectDashboardService } from './project-dashboard.service' ; // Updated import path
import { Project } from './project.model'; // Updated import path

@Component({
  selector: 'app-project-dashboard',
  standalone: true,
  imports: [CommonModule],
  //templateUrl: './project-dashboard.component.html',
  template:` 
          <div class="container">
            <div class="row">
              <div class="col-md-12">
                <div class="card">
                  <h5 class="card-header">Projekte</h5>
                  <div class="card-body">
                    <div class="table-responsive">
                      <table class="table table-striped table-hover">
                        <thead>
                          <tr>
                            <th>Projektname</th>
                            <th>Beschreibung</th>
                            <th>Level</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <ng-template ngFor let-project [ngForOf]="projects">
                              <td>{{project.project_name}}</td>
                              <td>{{project.project_description}}</td>
                              <td>{{project.project_level}}</td>
                            </ng-template>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>  
            </div>
            `,
  styleUrl: './project-dashboard.component.scss',
  providers: [ProjectDashboardService] // Updated provider
})


export class ProjectDashboardComponent implements OnInit {
  projects!: Project[]; // Updated type
  projectDashboardService: ProjectDashboardService; // Declare projectDashboardService property

  constructor(projectDashboardService: ProjectDashboardService) {
    this.projectDashboardService = projectDashboardService; // Assign projectDashboardService in the constructor
  }

  ngOnInit() {
    this.projectDashboardService.getProjectDashboardList()
      .subscribe(projects => this.projects = projects);
  }
}

最后我想得到一个响应式页面，显示当前获取的所有项目

Answer 1

这是一个工作示例，可以帮助您了解其实现。

一些注意事项：

• 如果您这样做

  private projectDashboardService: ProjectDashboardService

  ，它就是您现有代码中的简短形式，无需初始化变量然后设置值！

• tr

  （行）应该用于

  *ngFor

  ，因为否则它将只是一个单元格列表（

  td

  ）而没有自己单独的行

• 您可以在提供者中初始化服务，但您也可以使用

  providedIn: root

  ，以便所有家长都可以访问该服务（如果这是您的要求）

main.ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { CommonModule } from '@angular/common';
import { ProjectDashboardService } from './project-dashboard.service';

export interface Project {
  project_name: string;
  project_description: string;
  project_level: string;
}

@Component({
  selector: 'app-root',
  standalone: true,
  providers: [ProjectDashboardService],
  imports: [CommonModule],
  template: `
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <h5 class="card-header">Projekte</h5>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-striped table-hover">
                <thead>
                  <tr>
                    <th>Projektname</th>
                    <th>Beschreibung</th>
                    <th>Level</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let project of projects; trackBy trackByFn">
                    <td>{{project.project_name}}</td>
                    <td>{{project.project_description}}</td>
                    <td>{{project.project_level}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>  
    </div>
  `,
})
export class App {
  projects!: Project[]; // Updated type

  constructor(private projectDashboardService: ProjectDashboardService) {}

  ngOnInit() {
    this.projectDashboardService
      .getProjectDashboardList()
      .subscribe((projects) => (this.projects = projects));
  }

  trackByFn(index: number, item: Project) {
    return item.project_name;
  }
}

bootstrapApplication(App);

堆栈闪电战