Angular 17+新语法转换：将*ngIf与*ngFor替换为@if、@for

嘿，这就帮你把这段代码转换成Angular 17+的新控制流语法，其实转换起来特别直观，咱们一步步来看：

首先，Angular 17+引入的@if、@for这些新语法是块级控制流，不用再依赖带星号的结构指令，写起来更像咱们平时用的模板语言，可读性拉满。

先给你看转换后的完整代码：

@if (quotes.value(); as quoteList) {
  <ul>
    @for (quote of quoteList; track $index) {
      <li>
        "{{ quote.q }}"<br />
        <small>— {{ quote.a }}</small>
      </li>
    }
  </ul>
}

接下来拆解下每个部分的变化：

• 原来挂在<ul>上的*ngIf="quotes.value() as quoteList"，换成了@if (quotes.value(); as quoteList)的块语法，用大括号把需要渲染的<ul>整个包起来，逻辑和DOM结构彻底分离，看起来清爽多了。
• 原来的*ngFor="let quote of quoteList"替换成@for (quote of quoteList; track $index)，这里要注意track表达式是必须的！它是用来帮Angular优化列表渲染性能的。如果你的quote对象有唯一标识（比如id字段），更推荐用track quote.id，这样列表更新时Angular能更高效地复用DOM元素；要是没有唯一标识，用$index也完全没问题。
• 整个模板的逻辑结构现在更清晰了，不用再把指令绑定到DOM元素上，代码的可读性和维护性都提升了不少。

备注：内容来源于stack exchange，提问作者Francesco Leuzzi