I have a data model class called QuestionDataModel, like this:
class QuestionDataModel {
body: string;
constructor(bodyValue: string) {
this.body = bodyValue;
}
}
In my component html template, I'm trying to display the body content of each question in a table row. Here's how I tried to do it:
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- other columns skipped -->
<ng-container matColumnDef="body">
<th mat-header-cell *matHeaderCellDef>Question Body</th>
<td mat-cell *matCellDef="let oneQuestion">
{{ oneQuestion.bodyForTableRow }}
</td>
</ng-container>
</table>
But instead of displaying the modified body with line breaks replaced by "//" symbols, it shows empty rows.
I also tried using the original getter function oneQuestion.body, and that works correctly. So why is the modified version not working?
UPDATE
When I log the response from the REST call in the console, I can see that the dataSource array is populated with QuestionDataModel objects. But for some reason, the modified version of the body content doesn't render properly in the table rows.