Как показать список элементов во всплывающем диалоговом окне в Angular 6/8 - PullRequest
Новая
       3

Как показать список элементов во всплывающем диалоговом окне в Angular 6/8

1 голос
/ 24 января 2020

У меня есть диалоговое окно и я хочу показать список элементов, которые я выбрал из БД. Я использую 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 не определен, несмотря на наличие данных.

enter image description here

Чего здесь не хватает ... Было бы полезно, если любой может дать рабочий образец. Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 27 января 2020

Ваш JSON возвращает список "Предметов"

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

до

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

0 голосов
/ 24 января 2020

Одна проблема - я не вижу, чтобы 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>
...