Question

大家。我是Angular 2的新手，很抱歉，如果我犯了任何错误。我试图建立一个表，当用户点击表行时，该行内的数据转移到一个填充行数据的输入表单。在此表单中，用户可以编辑单击的行。在编辑时，用户单击的完全相同的表行应该在每次按键或选择选项时自动更新。我被困在表格转移部分。这是我的代码（全部在一个组件中）：

<button (click)="add()">Create</button>
<table>
<tr>
 <th>Title</th>
 <th>Priority</th>
 <th>Status</th>
 <th>Due Date</th>
 <th>Date Created</th>
 <th>Date Modified</th>
</tr>
<tr *ngFor="let task of tasks; let index=index" (click)="checking()">
 <td>{{tasks[index].Title}}</td>
 <td>{{tasks[index].Priority}}</td>
 <td>{{tasks[index].Status}}</td>
 <td>{{tasks[index].Due_Date}}</td>
 <td>{{objDate | date:'short'}}</td>
 <td>{{tasks[index].Date_Modified}}</td>
</tr>
</table>

这是任务详细信息表单：

<div style="text-align: left">
Title:
  <div><textarea style="width: 290px" [(ngModel)]="tasks[0].Title"></textarea>
  </div>
</div>
<br />
<div style="text-align: left">
Description:
  <div><textarea style="width: 290px"></textarea></div>
</div>
<br />
<div style="float: left">
Priority:
<select>
  <option selected="selected">Select</option>
  <option>Normal</option>
  <option>Major</option>
  <option>Critical</option>
</select>
</div>
<div style="float: right;">
Status:
<select>
  <option selected="selected">Select</option>
  <option>ToDo</option>
  <option>In Progress</option>
  <option>Done</option>
</select>
</div>
<br />
<br />
<div>
Due Date (mm/dd/yyyy):
</div>
<br />
<div>
Parent:
<select style="width: 250px">
  <option selected="selected">Select</option>
  <option>Task 1</option>
  <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Task 1.1</option>
  <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Task 1.2</option>
  <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Task 1.2.1</option>
</select>
</div>

有人可以帮帮我吗？我已经被困在这几个小时了。

Answer 1

我认为您正在寻找的是与ngModel进行一些双向数据绑定。您需要在模块中导入FormsModule。然后在你的组件中你可以做这样的事情（我只是将你的代码简化为非常简单的东西来展示这个概念）：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <table>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
    <tr *ngFor="let task of tasks; let index=index" (click)="checking(index)">
      <td>{{task.first}}</td>
      <td>{{task.second}}</td>
      <td>{{task.third}}</td>
    </tr>
  </table>

  <div>
    <form ngForm>
      <label for="first">First:</label>
      <input
        id="first"
        name="first"
        [(ngModel)]="selectedTask.first">
      <label for="second">Second:</label>
      <input
        id="second"
        name="second"
        [(ngModel)]="selectedTask.second">
      <label for="third">Third: </label>
      <select
        name="third"
        id="third"
        [(ngModel)]="selectedTask.third">
        <option selected>Select</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
    </form>
  </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedTask = {
    first: '',
    second: '',
    third: '',
  };

  tasks = [
    {
      first: 'Hi',
      second: 'This is my greeting',
      third: 'A'
    },
    {
      first: 'Bonjour',
      second: 'From france',
      third: 'C'
    },
    {
      first: 'Hi',
      second: 'Another greeting',
      third: 'C'
    }
  ];

  checking(index) {
    this.selectedTask = this.tasks[index];
  }
}

表格行上的角度2点击，填写输入表格

1 个答案: