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

我有一个对话框，想要显示从数据库中获取的项目列表。我正在使用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看起来像这样

 { 
  "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对象也是未定义的。

我在这里缺少什么。如果有人可以提供工作样品，这将很有帮助。提前致谢。