angular - Angular ngFor中的组件@Input

问题描述

我有以下代码来生成卡片。父组件.html：

<div *ngFor="let goal of goalList" class="row col-8 my-3 offset-2">
  <div class="card" style="width: 100rem;">
    <div class="card-header">
      <div class="row">
        <app-comment class="col-1 text-left align-middle" [ID]=goal.id></app-comment>
        <div class="col-11 text-center text-center">{{'Goals.Goal'|translate}}</div>
        </div>
      </div> 
      <div class="card-body">
        <div class="row">
          <div class="col-11 card-text">{{goal.text}}</div>
        </div>
        <div class="row">
          <mat-slider thumbLabel tickInterval="1" max="5" step="0.5" class="col-10 offset-1"
          [(ngModel)]="goal.EMPrating" (ngModelChange)="SaveGoalRating(goal)" color="primary"></mat-slider>
        </div>
        <div class="row">
          <mat-form-field class="col-4 offset-4">
            <input name="ActualDate" matInput [matDatepicker]="dtpicker" placeholder="{{'Goals.ActualDate'|translate}}"
            [(ngModel)]="goal.ActualDate" (ngModelChange)="SaveGoalDate(goal)">
            <mat-datepicker-toggle matSuffix [for]="dtpicker"></mat-datepicker-toggle>
            <mat-datepicker #dtpicker></mat-datepicker>
          </mat-form-field>
        </div>
      </div>
    </div>
  </div>

parent.component.ts中获取goalList的代码

  LoadGoals(){
    this.goalList = [];
    let goalArray: string[] = [];
    this.goalService.GetGoalResults(this.cookieService.get('email'),this.SurveyID).subscribe(result=>{
      result.split('\n').map(row=>{
        if (row != ""){
          goalArray = row.split(';');
          let d: Date = new Date (goalArray[3]);
          this.goalList.push({id:goalArray[0],text:goalArray[1],targetDate:null,ActualDate:d, status:null,EMPrating:Number(goalArray[2])});
        }
      })
    });
  }

目标等级：

export class Goal {
    id:string;
    text:string;
    targetDate:string;
    ActualDate:Date;
    status:string;
}

评论.component.html：

<div>
  <button mat-icon-button data-toggle="modal" data-target="#CommentModal" color="primary">
    <i class="material-icons">question_answer</i>
  </button>
  <div class="modal fade" id="CommentModal" tabindex="-1" role="dialog" aria-labelledby="CommentTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="CommentTitle">Comments</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row mt-3">
            <textarea class="form-control col-10 offset-1" [(ngModel)]="CommentText"></textarea>
          </div>
          <div class="row my-3">
            <button class="btn btn-success oi oi-check col-2 offset-5" [disabled]="!HasComment()" (click)="SubmitComment()"></button>
          </div>
          <div class="row">
            <span class="offset-1">Here will be comments.</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

评论.component.ts：

import { Component, OnInit, Input } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';
import { CommentService } from '../comment.service';

@Component({
  selector: 'app-comment',
  templateUrl: './comment.component.html',
  styleUrls: ['./comment.component.css']
})
export class CommentComponent implements OnInit {
  @Input() ID:string;
  private CommentText: string = "";
  constructor(private cookieService: CookieService, private commentService: CommentService) {
  }

  ngOnInit() {
  }
  SubmitComment(){
    alert(this.ID);
    //this.commentService.Submit("",this.cookieService.get('email'),this.CommentText);
  }
  HasComment():boolean{
    return this.CommentText != "";
  }
}

检查生成的 html 后，它看起来不错。第一个应用评论包含

ng-reflect--i-d="10"

而第二个有

ng-reflect--i-d="1010"

当 SubmitComment() 运行以提醒 ID 输入时，它始终显示第一个目标 (10) 的 ID。如何将卡的 ID (goal.id) 传递给其中的应用评论？

打字稿部分肯定没问题。我添加了

<span>{{ID}}</span>

到 comment.component.html 并显示正确的 ID。问题必须围绕html。

提前致谢！

标签： angularangular-components

angular - Angular ngFor中的组件@Input

问题描述

解决方案

推荐阅读