Angular 如何在弹出对话框屏幕中显示项目列表 6/8

Question

我有一个对话框，想显示我从数据库中获取的项目列表。我正在使用 PrimeNg 对话框控件。

我的app.component.html看起来像这样

<p-dialog header="Available Titles" [(visible)]="displayTraining" [draggable]="false" [resizable]="false" [modal]="true" [blockScroll]="true" [closeOnEscape]="false" [responsive]="false" [style]="{width: '800px'}">

</p-dialog>

使用服务调用，我从数据库中获取数据并从 .ts 文件中调用此服务。

我的app.component.ts看起来像这样

import { TrainingUrlServices } from '../services/TrainingUrlServices';
import { HttpClient } from '@angular/common/http';
import { TrainingUrls} from '../models/TrainingUrl';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

   displayTraining: boolean = false;

   services: TrainingUrlServices = new TrainingUrlServices(this.http);

   trainingUrls: TrainingUrls = new TrainingUrls();

   constructor(private http: HttpClient) { }

   ngOnInit() {
   }

   modelDialogForTraining() {

    this.services.TrainingUrls().subscribe(data => {            
        this.trainingUrls = data;          
    });        
   }
 }

其中 trainingUrls 是我的模型对象。我的模型 TrainingUrl.ts 看起来像这样

export class TrainingUrl {
  training_url_id: number;
  training_title: string = '';
  training_url: string = '';
}

export class TrainingUrls {
    Items: Array<TrainingUrl> = [];
}

我的控制器，TrainingUrlContoller.cs

public class TrainingUrlController : BaseController
{
    TrainingRepository repo = new TrainingRepository(null);

    [HttpGet]
    public string GetTrainingUrls()
    {
        Response.ContentType = "application/json";
        TrainingUrls results = new TrainingUrls();
        results = repo.Fetch();
        return JsonConvert.SerializeObject(results);

    }
 }

JSON它returns看起来像这样

 { 
  "Items":[ 
   { 
     "training_url_id":8,
     "training_title":"Desktop Apps - Date updated 3/27/2017",
     "training_url":"http://www.google.com?q=desktopapps"
   },
   { 
     "training_url_id":2,
     "training_title":"Implement Sequences Date 4/18/2017",
     "training_url":"https://www.sequencetraining.com/test.pdf"
   },
   { 
     "training_url_id":1,
     "training_title":"Programming guidelines Date 4/18/2017",
     "training_url":"https://programming.com/guidelines.pdf"
   }
 ]
}

现在我试图在对话框中显示 "training_title"。我的代码看起来像这样

<p-dialog header="Available Titles" [(visible)]="displayTraining" [draggable]="false" 
      [resizable]="false" [modal]="true" [blockScroll]="true"
      [closeOnEscape]="false" [responsive]="false" [style]="{width: '800px'}">  
<ul>
<li *ngFor="let item of trainingUrls.Urls">{{item.training_title}}</li>
</ul>
</p-dialog>

我的问题首先是对话框没有显示任何数据。当我调试 .ts 文件时，trainingurls 对象未定义，即使有数据。

我在这里缺少什么..如果有人可以提供工作示例，那将会很有帮助。提前致谢。

Answer 1

一个问题是我没有看到 modelDialogForTraining() 被调用过。我建议您在模板中使用 | async 功能。示例：

export class AppComponent implements OnInit {

   displayTraining: boolean = false;

   services: TrainingUrlServices = new TrainingUrlServices(this.http);

   trainingUrls$: Observable<Array<TrainingUrl>>;

   constructor(private http: HttpClient) { 
      this.trainingUrls$ = this.services.TrainingUrls().pipe(map(response => response.items))
   }

   ngOnInit() {
   }
 }

和

<li *ngFor="let item of trainingUrls$ | async">{{item.training_title}}</li>

Answer 2

你的JSONreturns列表"Items"

*ngFor="let item of trainingUrls.Urls">{{item.training_title}}

至

*ngFor="let item of trainingUrls.Items">{{item.training_title}}

Angular 如何在弹出对话框屏幕中显示项目列表 6/8

How to show list of items in a popup dialog screen in Angular 6/8

c#

primeng

angular