如何从Clarity Datagrid选中行获取数据并在模态框中展示

1. 重构模态框的内容展示与编辑绑定 #

当前用keyvalue管道遍历的方式只能简单输出值，无法满足编辑需求。我们可以直接将选中的selected用户对象属性绑定到表单控件上，同时用Clarity表单组件来优化编辑体验。

修改后的模态框部分代码：

<clr-dg-action-bar *ngIf="selected">
  <button class="btn btn-warning" (click)="openEditModal = true">Edit</button>
  <clr-modal [(clrModalOpen)]="openEditModal" clrLabelSize="4">
    <h3 class="modal-title">编辑用户</h3>
    <div class="modal-body">
      <form clrForm>
        <!-- ID 只读展示 -->
        <clr-input-container>
          <label>ID</label>
          <input clrInput type="text" [(ngModel)]="selected.id" disabled />
        </clr-input-container>

        <!-- 姓名 -->
        <clr-input-container>
          <label>姓名</label>
          <input clrInput type="text" [(ngModel)]="selected.name" name="name" />
        </clr-input-container>

        <!-- 邮箱 -->
        <clr-input-container>
          <label>邮箱</label>
          <input clrInput type="email" [(ngModel)]="selected.email" name="email" />
        </clr-input-container>

        <!-- 性别选择 -->
        <clr-select-container>
          <label>性别</label>
          <select clrSelect [(ngModel)]="selected.gender" name="gender">
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
        </clr-select-container>

        <!-- 状态选择 -->
        <clr-select-container>
          <label>状态</label>
          <select clrSelect [(ngModel)]="selected.status" name="status">
            <option value="active">活跃</option>
            <option value="inactive">非活跃</option>
          </select>
        </clr-select-container>
      </form>
    </div>
    <div class="modal-footer">
      <button class="btn btn-outline" (click)="openEditModal = false">取消</button>
      <button class="btn btn-primary" (click)="saveUser()">保存</button>
    </div>
  </clr-modal>
</clr-dg-action-bar>

2. 补充组件类的必要代码 #

确保你的app.component.ts包含以下变量与方法：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface User {
  id: number;
  name: string;
  email: string;
  gender: 'male' | 'female';
  status: 'active' | 'inactive';
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  users: User[] = [];
  selected: User | null = null;
  openEditModal = false;
  displayProgressSpinner = false;
  private apiUrl = 'https://gorest.co.in/public/v2/users';

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.loadUsers();
  }

  loadUsers(): void {
    this.displayProgressSpinner = true;
    this.http.get<User[]>(this.apiUrl).subscribe({
      next: (data) => {
        this.users = data;
        this.displayProgressSpinner = false;
      },
      error: () => {
        this.displayProgressSpinner = false;
      }
    });
  }

  saveUser(): void {
    // 在此添加用户更新逻辑，比如调用API提交修改
    console.log('待保存用户:', this.selected);
    this.openEditModal = false;
    // 可选：更新后重新加载用户列表
    this.loadUsers();
  }
}

3. 关键说明 #

• 通过[(ngModel)]双向绑定selected对象的属性，实现详情展示与编辑的联动。
• 使用Clarity原生表单组件，让界面风格统一，同时获得表单校验等内置能力。
• 简化了模态框触发逻辑，直接通过按钮点击设置openEditModal = true，无需额外方法。
• saveUser方法预留了API调用的位置，可根据实际业务需求补充更新逻辑。

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