在Angular材质中创建动态交叉表

Question

我想在Angular材质中创建一个动态表，其中有用户行和有兴趣爱好的列，表中的数据是复选框，用户可以将uer链接到一个或多个兴趣爱好，完成后我必须将选择发送到http中的服务器。你知道我该怎么做

感谢您的帮助

Answer 1

也许您可以将“兴趣爱好”列中的按钮与功能替换为true和false，可以检查我的结果

此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中工作，如果需要，可以将其更改为typescript，希望可以为您提供帮助