3

У меня есть таблица, состоящая из полей для ввода. Есть ли возможность в Angular 2 считывать данные из полей и отображать их под таблицей? На примере Так выглядит таблица сейчас вверху в каждое поле введена буква слова, которое стоит справа от таблицы. я хочу, чтобы эти буквы можно было считать и отобразить внизу таблицы одним словом. Мой код

import { Component, OnInit } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'part1',
  template: `
    <table>
      <tbody>
      <tr>
        <td><input value="R"></td>
        <td><input value="o"></td>
        <td><input value=""></td>
        <td><input value="s"></td>
        <td><input value="e"></td>
        <td><input value="n"></td>
        <p>Rosen</p>
      </tr>
      <tr id ="check" *ngFor="let item of itemsSource">
        <td *ngFor="let item of list2"><input [(ngModel)]="value2"></td>
        {{item}}
      </tr>
      </tbody>
    </table>
    <button>OK</button>
    <p>{{value2}}</p>

  `,
  // styleUrls: ['app/part1/part1.component.css'],
  providers: [DataService]

})
export class Part1Component implements OnInit {
  public itemsSource: string[];
  list: string[] = [];
  list2: string[] = ['a', 'a', 'a', 'a', 'a', 'a'];
  constructor(public dataService: DataService) {
  }
  ngOnInit() {
    this.itemsSource = this.dataService.getData();
  }
  }
}
1
  • Почитайте принцип работы с формами в ангулар 2. Там большое колличество вариантов.... Можно использовать name можно задавать локальную переменную в шаблоне # 12 июн 2017 в 11:17

1 ответ 1

-2

Попробуйте написать директиву. Повешайте её на <tr>. Пусть эта директива пробегает по всем дочерним элементам <td>, получая их значения и выводит в нужное место. Это на вскидку. При более точном описании задачи, можно точнее помочь.

Вариант номер 2

Смотрите, можно сделать так, создать компоненту, в компоненте есть <input [(ngModel)] = "value">. В теле компоненты объявим переменную как @Input() value: string. Эта компонента будет динамически добавляться, согласно вашим условиям. Ссылку на вновь созданный объект(компоненту) сохранить где либо в массиве или ещё как. Далее по какому либо событию можно пробегать по данному сохранённому списку и выбирать данные значения. Обращаясь к полю value либо в компоненте добавить оповещалку родителя об изменениях в дочерних элементах, что позволить всегда знать, что введено. Нечто аналогичное мне удалось провернуть в своём проекте, прочитав статью

3
  • Директиву? Angular2? Пробегать по tr? Что-то тут совсем не то...
    – Qwertiy
    11 июн 2017 в 18:55
  • Qwertiy, есть идеи получше? Готов выслушать :) 12 июн 2017 в 3:14
  • @SergeyRogachev Сергей, спасибо за ответ, посмотрела документацию, похоже так не получится...если более конкретно, то мне надо создать такую таблицу вводов, как на примере. Чтобы была возможность вводить буквы и проверять, нужные ли были введены. Как проверить - я уже написала алгоритм, он работает. Но для это алгоритма, мне нужно собрать буквы с каждой строки в array of arrays, которая будет выглядить так [['Ro_sen'] , ['Planeten']]. То есть, есть ли способ считать данные с каждого input и положить в array?... Вот пример savepic.ru/14371966.png
    – Natali
    12 июн 2017 в 18:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.