时间戳

首页 > 解决方案 > 在读取 json 文件的列中显示文本单选按钮，选择时应在下面的 div 中显示值

javascript - 在读取 json 文件的列中显示文本单选按钮，选择时应在下面的 div 中显示值

问题描述

将通过从 json 文件中获取值来创建一个表，其中数据应显示为列中的单选按钮（从每一列中选择一个值）。从每列中选择的值应显示在表格下方。谁能帮我解决这个问题？

我的 Json 是 "employees":[ {"firstName":"John", "lastName":"Doe" , "manager":"paul", "domain":"digital"}, {"firstName":"Anna" , "lastName":"Smith", "manager":"Abraham","domain":"mechanics"}, {"firstName":"Peter", "lastName":"Jones", "manager":"Jonathan" “域”：“物理学”} {“名字”：“安娜”，“姓氏”：“卡特”，“经理”：“Bravo”，“域”：“化学”} {“名字”：“沃森” , "lastName":"Daniel", "manager":"Pollock","domain":"生物学"} {"firstName":"James", "lastName":"Smith", "manager":"Tait","domain":"analogy"} {"firstName":"Angel", "lastName":" Queen", "manager":"Mcgrath","domain":"mathematics"} {"firstName":"Sana", "lastName":"Elizebeth", "manager":"Waugh", "domain":"english "}]} {"firstName":"Sana", "lastName":"Elizebeth", "manager":"Waugh", "domain":"english"} ]} {"firstName":"Sana", "lastName":"Elizebeth", "manager":"Waugh", "domain":"english"} ]

标签： javascriptjqueryhtmlangularvuejs2

解决方案

所以这是我的解决方案。请注意，这只是一个建议：

我们在 UI 中放置了 2 个表格。

第一个表用于输入目的。tr注意表体中的 ngFor 循环。在这里，您循环遍历对象列表，并为每个新对象tr创建一个新对象。每个tr包含 4 个td，其中包含input“radio”类型的span-elements 和一个显示字段内容的 -elements。由“名称”属性控制，每个 COLUMN 构建一个单元。这意味着单击单选按钮只会影响同一列中每个其他单选按钮的状态，而不是行！并且每个input元素的值都被设置，以便在单击元素时提供它。

-ngModel属性是故事中最重要的部分。每当您单击单选按钮时，ngModel 都会将单击元素的值推送到连接的变量中。ngModel然后，只要更新 4 个变量之一（插值），第二个表就会直接更新。这就是为什么单击一个单选按钮然后在“输出表”的相应字段中提示其值的原因。

希望这可以帮助。

在您的 HTML 文件中：

  <h1>Input Table</h1>

  <div class="row" id="inputTableSector">
    <table id="inputTable" class="table table-striped">
      <thead>
        <tr>
          <td>first name</td>
          <td>last name</td>
          <td>manager</td>
          <td>domain</td>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let employee of employees;">
          <td><input type="radio" name="firstName" [value]="employee.firstName" [(ngModel)]="currentFirstName"><span>{{employee?.firstName}}</span></td>
          <td><input type="radio" name="lastName" [value]="employee.lastName" [(ngModel)]="currentLastName"><span>{{employee?.lastName}}</span></td>
          <td><input type="radio" name="manager" [value]="employee.manager" [(ngModel)]="currentManager"><span>{{employee?.manager}}</span></td>
          <td><input type="radio" name="domain" [value]="employee.domain" [(ngModel)]="currentDomain"><span>{{employee?.domain}}</span></td>
        </tr>
      </tbody>
    </table>
  </div>

  <hr>

  <h1>Output Table</h1>

  <div class="row" id="outputTableSector">
    <table id="outputTable" class="table table-striped">
      <thead>
        <tr>
          <td>first name</td>
          <td>last name</td>
          <td>manager</td>
          <td>domain</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{currentFirstName}}</td>
          <td>{{currentLastName}}</td>
          <td>{{currentManager}}</td>
          <td>{{currentDomain}}</td>
        </tr>
      </tbody>
    </table>
  </div>

在您的 TypeScript 文件中：

protected employees: Array<Object>;
protected currentLastName: string;
protected currentFirstName: string;
protected currentManager: string;
protected currentDomain: string;

ngOnInit(): void {
  const employeesJSON = '[' +
    '{"firstName":"John","lastName":"Doe","manager":"paul","domain":"digital"},' +
    '{"firstName":"Anna","lastName":"Smith","manager":"Abraham","domain":"mechanics"},' +
    '{"firstName":"Peter","lastName":"Jones","manager":"Jonathan","domain":"physics"},' +
    '{"firstName":"Anna","lastName":"carter","manager":"Bravo","domain":"chemistry"},' +
    '{"firstName":"Watson","lastName":"Daniel","manager":"Pollock","domain":"biology"},' +
    '{"firstName":"James","lastName":"Smith","manager":"Tait","domain":"analogy"},' +
    '{"firstName":"Angel","lastName":"Queen","manager":"Mcgrath","domain":"mathematics"},' +
    '{"firstName":"Sana","lastName":"Elizebeth","manager":"Waugh","domain":"english"}' +
    ']';
  this.employees = JSON.parse(employeesJSON);
}

推荐阅读