Таблица данных углового материала без отображения сервисных данных - PullRequest
0 голосов
/ 16 июня 2019

Я пытаюсь отобразить некоторые данные в таблице данных углового материала, у моего метода класса обслуживания есть данные, но они не отображаются в таблице данных, пожалуйста, помогите мне, я не могу найти ошибку в таблице данных за последние 3 часа

класс обслуживания и API



getfriendAnswers(id: number): Observable<FriendDetails[]> {
      debugger;
      return this.httpClient.get<FriendDetails[]>(this.apiUrl + '/Questions/yourFriendAnswerdCount/' + id)

   }


[HttpGet, Route("yourFriendAnswerdCount/{id}")]
   public ActionResult getFriendAnswerdCount(int id)
 {
   return Ok(userRepository.getFriendAnswerdCount(id));
  }


класс сведений о друге

export interface FriendDetails {
    Id: number;
    UserId: number;
    AnsweredCount: number;
    FriendName: string;
}

класс компонента

export class FriendAnswredComponent implements OnInit {
id;
  constructor(private service: UserService,private route: ActivatedRoute) { }

  dataSource :FriendDetails[]=[];

  displayedColumns: string[] = [ 'FriendName', 'AnsweredCount',];

  ngOnInit() {
    this.id = parseInt(this.route.snapshot.paramMap.get('id'));


    this.service.getfriendAnswers(this.id).subscribe(b => {
      debugger;
      this.dataSource = b;

    });
  }

}

шаблон таблицы данных материала

<mat-card>
  <mat-card-title>your friends answered count questions are</mat-card-title>
  <mat-card-content>

<div *ngIf="dataSource">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

<!--- Note that these columns can be defined in any order.
      The actual rendered columns are set as a property on the row definition" -->


<!-- Name Column -->
<ng-container matColumnDef="FriendName">
  <th mat-header-cell *matHeaderCellDef> FriendName </th>
  <td mat-cell *matCellDef="let element"> {{element.FriendName}} </td>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef="AnsweredCount">
  <th mat-header-cell *matHeaderCellDef> AnsweredCount </th>
  <td mat-cell *matCellDef="let element"> {{element.AnsweredCount}} </td>
</ng-container>


<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</mat-card-content>
</mat-card>
{{dataSource[0]?.AnsweredCount}}

сервис возвращает этот вывод
{id: 5, userId: 11, answeredCount: 2, friendName: "sarala"} Я получаю пустую таблицу данных, даже сервис возвращаетданные

1 Ответ

0 голосов
/ 16 июня 2019

вы пытаетесь связать dataSource[0]?.AnsweredCount, когда AnsweredCount не существует в вашем объекте.

Это должно быть a nsptedCount, а не A nsptedCount:

{{dataSource[0]?.answeredCount}}

...