如何在每行textarea右侧添加图标按钮并实现目标布局（NG-ZORRO）

根据你的需求，结合NG-ZORRO组件库的布局能力，调整代码如下，实现每行文本框右侧垂直排列图标按钮的样式：

<ng-template #item let-item let-index="index">
  <nz-row [nzGutter]="8" style="align-items: flex-start; margin-bottom: 12px;">
    <!-- 文本输入框区域 -->
    <nz-col [nzSpan]="22">
      <textarea 
        disabled="true" 
        id="CommentBox_{{ index }}" 
        [(ngModel)]="item.commentText" 
        nz-input 
        rows="4"
        style="width: 100%;"
      ></textarea>
    </nz-col>
    <!-- 图标按钮区域 -->
    <nz-col [nzSpan]="2">
      <nz-row nzDirection="vertical" [nzGutter]="6">
        <button nz-button nzGhost nzSize="small">
          <i nz-icon nzType="edit"></i>
        </button>
        <button nz-button nzGhost nzSize="small">
          <i nz-icon nzType="delete"></i>
        </button>
        <button nz-button nzGhost nzSize="small">
          <i nz-icon nzType="save"></i>
        </button>
      </nz-row>
    </nz-col>
  </nz-row>
</ng-template>

关键调整说明 #

• 栅格拆分：用nz-col将行分为两部分，文本框占22列、按钮区占2列（可根据实际布局需求修改nzSpan数值）
• 垂直排列按钮：按钮区通过nz-row nzDirection="vertical"实现垂直布局，nzGutter控制按钮间的垂直间距
• 图标替换：用NG-ZORRO的nz-icon组件替换文字，匹配参考样式的图标按钮
• 布局对齐：外层nz-row设置align-items: flex-start让文本框和按钮顶部对齐，添加margin-bottom控制行间距
• 尺寸适配：按钮添加nzSize="small"，让按钮尺寸与文本框高度匹配

内容的提问来源于stack exchange，提问作者CodeMan03