在 Angular 组件 html 模板中使用 getter

Question

我有一个数据模型类，比如说：

class Question {
    body: string;
    
    get bodyForTableRow(): string {
        return this.body.replace("\n", " // ");
    }
}

在组件 html 模板中，我使用以下声明来评估 getter 值：

 {{ oneQuestion.bodyForTableRow }}

但不是 value，而是用 // 符号替换新行，我得到一个空字符串。

当我使用时

 {{ oneQuestion.body }}

它显示正文内容。

为什么会这样？我是否应该始终使用 real 字段将它们映射到 html-components 和 getter 不适合这种情况？

---

更新

当模板中的声明看起来像这样时

<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.body }}
    </td>
  </ng-container>
</table>

它在每个表格行中显示body 内容。但是当我使用这段代码时：

<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>

它显示空行。

---

更新 2

这样声明的问题数据模型类：

export class QuestionDataModel {
  body: string; // public access field for template
  
  constructor(bodyValue: string) {
    this.body = bodyValue;
  }  
  
}

数据源是这样声明的：

  dataSource: QuestionDataModel[];

我通过 rest-call 填充数据源

const url: string = `/questions/all`;
this.http.get(url).subscribe(
  (data: QuestionDataModel[]) => {
    this.dataSource = data;
  },
  (error) => this.reportServerError(error)
);

Answer 1

你正在做的事情应该可以工作，你还有其他一些问题，比如没有正确实例化你的类，但你可能真的想重组以使用 setter...

class Question {
    private _body: string;

    set body(body: string) {
      this.bodyForTableRow = body.replace("\n", " // ");
      this._body = body;
    }
    get body() {
      return this._body;
    }
    
    bodyForTableRow: string;
}

角度变化检测的工作方式是在每个变化检测周期上评估函数，这可能非常频繁，因此通过将 replace 放入 getter 中，您可以在每个周期中运行它。使用这种结构，您只需在需要时运行和设置它。

要使用这个或任何类，你需要使用new关键字，

this.oneQuestion = new Question();
this.oneQuestion.body = 'my string with line returns \n next line';