Question

我有一个来自公司页面的个人资料页面，在这里，我从后端添加了工作档案和公司提案的数据。这里的数据被提取到前端，但是它加载了2页（即）配置文件页面和公司页面一个在另一个上面，并出现错误

ERROR TypeError: Cannot read property 'recieved' of undefined

我没有得到我错的地方，请帮助

HTML：

<td  class="job">
            <thead>
              <th colspan="4">Job Requests</th>
            </thead>
            <tbody class="content">
              <tr>
                <td>Recieved </td>
                <td>{{jobprofiles.received}}</td>
                <td>Accepted</td>
                <td>{{jobprofiles.accepted}}</td>
              </tr>
              <tr>
                <td>Rejected</td>
                <td>{{jobprofiles.rejected}}</td>
                <td>Unanswered</td>
                <td>{{jobprofiles.unanswered}}</td>
              </tr>
            </tbody>
          </td>

TS：

public jobprofiles: Array<any>;
public companyprofile: Array<any>;

this.service
            .getCompanyData(id)
            .subscribe(
              data => {
                this.company = data;
                this.accepts = data.proposals;
                this.reviews = data.reviews;
                this.jobprofiles = data.jobRequests;
                this.companyprofile = data.companyProposals;
                console.log(this.jobprofiles);
                console.log(this.company);
              }, error => {})

控制台：这是公司的控制台

this.jobprofiles的控制台

Answer 1

我在html中使用* ngIf条件解决了这个问题：

HTML：

<tbody class="content">
              <tr>
                <td>Recieved </td>
                <td *ngIf="jobprofiles && jobprofiles.received">{{jobprofiles.received}}</td>
                <td>Accepted</td>
                <td *ngIf="jobprofiles && jobprofiles.accepted">{{jobprofiles.accepted}}</td>
              </tr>
              <tr>
                <td>Rejected</td>
                <td *ngIf="jobprofiles && jobprofiles.rejected">{{jobprofiles.rejected}}</td>
                <td>Unanswered</td>
                <td *ngIf="jobprofiles && jobprofiles.unanswered">{{jobprofiles.unanswered}}</td>
              </tr>
            </tbody>

Answer 2

您发布的错误消息有点误导，因为它提到recieved而不是received

无论如何，您还可以使用ngIf运算符

来代替使用?。

          <tr>
            <td>Recieved </td>
            <td>{{jobprofiles?.received}}</td>
            <td>Accepted</td>
            <td>{{jobprofiles?.accepted}}</td>
          </tr>

此外，使用您发布的解决方案，如果received或accepted设置为0，则不会显示表格单元格（但这取决于您的需求）

当在angular4中单击一页时，如何防止加载2页

2 个答案: