如何显示特定值的信息?

时间:2018-07-18 08:44:18

标签: angular typescript

在此页面上,我显示一个特定的用户来编辑其信息/users/524.json。如何显示同一页面上另一个表的工作日。我已经布置了大部分代码,以防万一。在“ StackBlitz”上抱歉,但是不能部署到那里。通常,我在这里遇到问题“ loadWorkingDays”。请看看并告诉我要解决的问题。

html:

<div class="card">
  <table>
    <thead>
      <tr>
        <th>Working Days</th>
      </tr>
     </thead>
     <tbody>
       <tr *ngFor="let workingDay of filteredWorkingDays" >
          <td>{{workingDay.date}}</td>                             
       </tr>
      </tbody>
   </table>
</div>

ts:

  ...
  users: Array<User>;
  workingDays: Array<WorkingDay>;
  id: number;
  routeId: any;
  returnUrl: string;
  public errorMsg;
  filteredWorkingDays  =[];

  constructor(
    private authTokenService: Angular2TokenService, 
    private route: ActivatedRoute,
    private router: Router,
    private servUser: UserService,
    private servWorkingDay: WorkingDayService,
  ) {
    this.workingDays = new Array<WorkingDay>();
    this.users = new Array<User>();
  }

  @Input() workingDay: WorkingDay;
  @Input() user: User;

  ngOnInit() {
    this.loadWorkingDays();
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/users';
    this.routeId = this.route.params.subscribe(
      params => {
        this.id = +params['id'];
      }
    )
    let userRequest = this.route.params
      .flatMap((params: Params) =>
        this.servUser.getUser(+params['id']));
    userRequest.subscribe(response => this.user = response.json(), error => this.errorMsg = error);
  }

   private loadWorkingDays() {
        let filteredWorkingDays = this.workingDays;
        if (this.servWorkingDay) {
          this.servWorkingDay.getWorkingDays().subscribe(workingDay => this.workingDays = workingDay);
            }
        this.filteredWorkingDays = this.workingDays.filter((workingDay) => workingDay.w_user_id == this.user.user_id);

      }
 ...

1 个答案:

答案 0 :(得分:2)

问题是该行

this.filteredWorkingDays = this.workingDays.filter((workingDay) => workingDay.w_user_id == this.user.user_id);

也应该在订阅回调中。否则,filteredWorkingDays将始终是未定义的,因为在您分配workingDays时尚未定义。

您的函数应如下所示:

private loadWorkingDays() {
    let filteredWorkingDays;
    if (this.servWorkingDay) {
        this.servWorkingDay.getWorkingDays().subscribe(workingDay => {
            this.workingDays = workingDay;
            this.filteredWorkingDays = this.workingDays.filter((workingDay) => workingDay.w_user_id == this.user.user_id);
        });
    }
}