我可以在 Angular 模板中使用带方括号 属性 访问权限的安全运算符吗？
Can I use the safe operator with square bracket property access in Angular template?
在打字稿中，我可以像这样进行“可选链接”（从 3.7.0 开始）：
const cell = col.selector ? rowData[col.field]?.[col.selector] : rowData[col.field];
如果我尝试在我的 Angular 模板中使用安全运算符做类似的事情，它会抛出编译器错误，就好像我误用了三元运算符一样。
<div>{{ col.selector ? rowData[col.field]?.[col.selector] : rowData[col.field] }}</div>
错误：
Parser Error: Conditional expression col.selector ? rowData[col.field]?.[col.selector] : rowData[col.field] requires all 3 expressions at the end of the expression [{{ col.selector ? rowData[col.field]?.[col.selector] : rowData[col.field] }}]
是否可以在我的 Angular 模板中使用其他语法来提供与 typescript 片段类似的结果？最后的办法是在打字稿中编写一个非常简单的辅助函数，returns 来自第一个片段的“单元格”值，但我更愿意将其保留在模板中。
您可以使用模板表达式执行的操作是有限的。
Angular 文档提到您无法在模板表达式中使用可选的链接运算符 (https://angular.io/guide/template-syntax#template-expressions)
You can't use JavaScript expressions that have or promote side
effects, including:
Assignments (=, +=, -=, ...) Operators such as new, typeof,
instanceof, etc. Chaining expressions with ; or , The increment and
decrement operators ++ and -- Some of the ES2015+ operators Other
notable differences from JavaScript syntax include:
No support for the bitwise operators such as | and & New template
expression operators, such as |, ?. and !
也许不是更漂亮的语法，但这可能有效：
<div>{{ rowData[col.field] ? (col.selector ? rowData[col.field][col.selector] : rowData[col.field]) : null }}</div>
所以首先检查是否定义了rowData[col.field]。如果是，请继续执行您的代码段（包含在括号中）；因为 rowData[col.field] 已经被检查过并且应该被定义，所以不需要用 safe operator 再次检查它所以我们可以将 rowData[col.field]?.[col.selector] 更改为 rowData[col.field][col.selector].
如果您想要更简洁的语法，就像您知道如何使用辅助函数实现此目的一样，您可以将该函数带到管道并将您想要访问的属性作为参数传递。
在打字稿中，我可以像这样进行“可选链接”（从 3.7.0 开始）：
const cell = col.selector ? rowData[col.field]?.[col.selector] : rowData[col.field];
如果我尝试在我的 Angular 模板中使用安全运算符做类似的事情，它会抛出编译器错误，就好像我误用了三元运算符一样。
<div>{{ col.selector ? rowData[col.field]?.[col.selector] : rowData[col.field] }}</div>
错误：
Parser Error: Conditional expression col.selector ? rowData[col.field]?.[col.selector] : rowData[col.field] requires all 3 expressions at the end of the expression [{{ col.selector ? rowData[col.field]?.[col.selector] : rowData[col.field] }}]
是否可以在我的 Angular 模板中使用其他语法来提供与 typescript 片段类似的结果？最后的办法是在打字稿中编写一个非常简单的辅助函数，returns 来自第一个片段的“单元格”值，但我更愿意将其保留在模板中。
您可以使用模板表达式执行的操作是有限的。
Angular 文档提到您无法在模板表达式中使用可选的链接运算符 (https://angular.io/guide/template-syntax#template-expressions)
You can't use JavaScript expressions that have or promote side effects, including:
Assignments (=, +=, -=, ...) Operators such as new, typeof, instanceof, etc. Chaining expressions with ; or , The increment and decrement operators ++ and -- Some of the ES2015+ operators Other notable differences from JavaScript syntax include:
No support for the bitwise operators such as | and & New template expression operators, such as |, ?. and !
也许不是更漂亮的语法，但这可能有效：
<div>{{ rowData[col.field] ? (col.selector ? rowData[col.field][col.selector] : rowData[col.field]) : null }}</div>
所以首先检查是否定义了rowData[col.field]。如果是，请继续执行您的代码段（包含在括号中）；因为 rowData[col.field] 已经被检查过并且应该被定义，所以不需要用 safe operator 再次检查它所以我们可以将 rowData[col.field]?.[col.selector] 更改为 rowData[col.field][col.selector].
如果您想要更简洁的语法，就像您知道如何使用辅助函数实现此目的一样，您可以将该函数带到管道并将您想要访问的属性作为参数传递。