Создать динамический c кросс-стол из Angular материала

Question

Я хочу создать динамическую c таблицу в материале Angular, где в строках у меня есть пользователи, а в столбцах у меня есть хобби, данные в таблице - это флажки, в которых пользователь может связать пользователя с одним или несколькими хобби. и когда fini sh, я должен отправить выбор на сервер в http. Вы хоть представляете, как я могу это сделать

Спасибо за вашу помощь

Answer 1

возможно, вы можете использовать кнопки в столбце хобби с функциями для замены истинного и ложного, вы можете проверить мой результат

это для функции в javascript:

function myFunction(str) {
 if (document.getElementById(str).innerHTML == "true") {
  document.getElementById(str).innerHTML = "false"
 } else document.getElementById(str).innerHTML = "true"
}

и это для html:

<table>
  <tr>
    <th></th>
    <th>Foot</th>
    <th>Running</th>
    <th>Swimming</th>
    <th>Baseball</th>
  </tr>
  <tr>
    <td>id_user1</td>
    <td id="foot1" onclick="myFunction('foot1')">true</td>
    <td id="running1" onclick="myFunction('running1')">false</td>
    <td id="swim1" onclick="myFunction('swim1')">false</td>
    <td id="baseball1" onclick="myFunction('baseball1')">false</td>
  </tr>
  <tr>
    <td>id_user2</td>
    <td id="foot2" onclick="myFunction('foot2')">false</td>
    <td id="running2" onclick="myFunction('running2')">false</td>
    <td id="swim2" onclick="myFunction('swim2')">false</td>
    <td id="baseball2" onclick="myFunction('baseball2')">true</td>
  </tr>
  <tr>
    <td>id_user3</td>
    <td id="foot3" onclick="myFunction('foot3')">true</td>
    <td id="running3" onclick="myFunction('running3')">false</td>
    <td id="swim3" onclick="myFunction('swim3')">false</td>
    <td id="baseball3" onclick="myFunction('baseball3')">false</td>
  </tr>
  <tr>
    <td>id_user4</td>
    <td id="foot4" onclick="myFunction('foot4')">false</td>
    <td id="running4" onclick="myFunction('running4')">false</td>
    <td id="swim4" onclick="myFunction('swim4')">true</td>
    <td id="baseball4" onclick="myFunction('baseball4')">true</td>
  </tr>
</table>

Я думаю, что это может работать в javascript, возможно, просто замените его на машинопись в вашем случае, если хотите, надеюсь, может помочь