Question

想法是在用户点击按钮视图时仅显示相应挑战的详细信息：

到目前为止，当我点击按钮challenges时，我只能加载所有view：

这是可以理解的，因为在我的view-one-challenge.component.html中，我将其编码为：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <div class="modal-header" >
    <h4 class="modal-title" >Challenge Details</h4>
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
        <!-- HTML table for displaying a challenge details -->
        <table class='table table-hover table-responsive table-bordered'>

            <tr *ngFor="let challenge of challenge_list">
                <td class="w-40-pct">Name</td>
                <td>{{challenge?.name}}</td>
            </tr>

            <tr *ngFor="let challenge of challenge_list">
                <td>Duration</td>
                <td>{{challenge?.duration}}</td>
            </tr>

            <tr *ngFor="let challenge of challenge_list">
                <td>Description</td>
                <td>{{challenge?.description}}</td>
            </tr>

            <tr *ngFor="let challenge of challenge_list">
                <td>Quiz</td>
                <td>{{challenge?.Quiz.title}}</td>
            </tr>

        </table>
    </div>
        <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>

challenge_list包含我通过challengeService从REST API获得的所有挑战，以及我如何用数据填充它：

  ngOnInit() {
        console.log("inside ngOnInit...");
    this.challengeService.getChallenges().subscribe(
      data => {
        this.challenge_list = data;
      },
      error => {
        this.alertService.error(error);
      });
  }

从REST API获取数据的方法称为getChallenges()，并通过HttpClient获取数据：

getChallenges(): Observable<Challenge[]> {
  console.log("inside getChallenges ===============");
    return this.http.get<Challenge[]>(this._challengeUrl);
}

我想要做的是，每次点击按钮view而不是加载所有挑战时，我只希望显示与挑战id对应的数据被点击。

我需要的是创建一个方法，该方法将id：number作为参数，遍历所有挑战并返回具有相应id的那个。但是，由于我对Angular有点新意，我不知道如何去做。任何想法甚至提示都会受到极大的赞赏。

另外，我认为我没有以优雅的方式加载数据，因为我第二次使用challengeService从REST API获取数据。有没有办法可以简单地复制＆＃34;或＆＃34;使用＆＃34;或＆＃34;转移＆＃34;或＆＃34;注入＆＃34;它在第一张图片（和另一个组件）中显示的数据到我的弹出窗口而不必调用API？先谢谢你们。

Answer 1

您可以将ID传递给您的组件，您可以使用输入，例如

弹出

@Input() exampleId: number;

你传递的就像这样：

<app-popup [exampleId]="theIdYouWantToPass"></app-popup>

然后只需调用方法并遍历内部的所有内容：

forEach(const s of yourArray) {
  if(s.id == exampleId) {..}
}

希望它有所帮助。

编辑：您可以传递任何这样的数据，整个列表，所以你不必调用api

Answer 2

执行此操作的最佳方法是使用不同的HTML标记：使用ngFor迭代challenge_list并分别创建每个元素：

<div class="modal-body">
    <!-- HTML table for displaying a challenge details -->
    <table *ngIf="challenge_list != null" class='table table-hover table-responsive table-bordered'>
        <tbody>
            <tr>
                <th>Name</th>
                <th>Duration</th>
                <th>Description</th>
                <th>Quiz</th>
                <th>Actions</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
            </tr>
            <tr *ngFor="let campaign of campaigns; let i = index">
                <td>{{challenge?.name}}</td>
                <td>{{challenge?.duration}}</td>
                <td>{{challenge?.description}}</td>
                <td>{{challenge?.Quiz.title}}</td>
                <td>
                    <!-- TODO: Add routerLink -->
                    <a (click)="viewDialog(challenge)">View</a>
                    <a (click)="openEdit(challenge)">View</a>
                    <a (click)="openDelete(challenge)">View</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

这样，每次调用viewDialog（）函数时，都会将整个挑战对象作为输入。然后，您需要在组件中创建一个viewDialog（）函数，该函数可以显示对话框或重新呈现它。

将数据加载到弹出窗口

2 个答案: