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

Question

从json文件中获取值来创建一个表，其中数据应显示为列中的单选按钮(从每列中选择一个值)。每列中选定的值应显示在表下方。有人能帮我吗？

我的Json"雇员"：[｛"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"："analog"｝｛"firstName"："Angel"，"lastName"：《Queen》，"manager"："Mcgrath"，"domain"："mathematics"｝｛"firstName"："Sana"，"lastName"：《Elizebeth》，"manager"："Waugh"，"domain"："english"｝]

Answer 1

请注意，您必须应用Observable内部的返回值。你最终尝试的是：

const employeesJSON = Observable<any>;

然后Angular尝试访问包含的对象，这是不可能的，因为Observable<any>与普通对象的数组不同。

试试这个解决方案：

protected employees: Array<Object>;  
ngOnInit() { 
this.http.get("api.myjson.com/bins/tshu8").pipe(map(res => {
if (res) {
this.employees = res.json();
}
}));
}

Answer 2

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

我们在UI中放置了2张表。

第一个表格用于输入。注意表体tr中的ngFor循环。在这里，您可以循环浏览对象列表，并且每个新对象都会创建一个新的tr。每个tr包含4个td，其中包含类型为"radio"的input元素和一个显示字段内容的span元素。由"name"属性控制，每个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);
}