отображать текстовые радиокнопки в столбцах при чтении файла JSON и при выборе должно отображать значение в нижнем div

Question

Таблица должна быть создана на основе значений из файла json, где данные должны отображаться в виде переключателей в столбцах (одно значение выбирается из каждого столбца). Выбранные значения из каждого столбца должны отображаться под таблицей. Может ли кто-нибудь помочь мне с этим?

Мой Джсон "сотрудники": [ {"firstName": "John", "lastName": "Doe", "manager": "paul", "domain": "digital"}, {"firstName": "Анна", "lastName": "Смит", "менеджер": "Авраам", "домен": "механика"}, {"firstName": "Питер", "lastName": "Джонс", "менеджер": "Джонатан", "домен": "физика"} {"firstName": "Анна", "lastName": "Картер", "менеджер": "Браво", "домен": "химия"} {"firstName": "Watson", "lastName": "Daniel", "manager": "Pollock", "domain": "biology"} {"firstName": "James", "lastName": "Smith", "manager": "Tait", "domain": "аналогия"} {"firstName": "Angel", "lastName": "Queen", "manager": "Mcgrath", "domain": "математика"} {"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

Так вот мое решение. Обратите внимание, что это только предложение:

Мы поместили 2 таблицы в пользовательский интерфейс.

Первая таблица предназначена для ввода. Обратите внимание на цикл ngFor в tr тела таблицы. Здесь вы перебираете свой список объектов, и с каждым новым объектом создается новый tr. Каждый tr содержит 4 td, которые содержат input -элементы типа "radio" и 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);
}