如果超过屏幕长度，则隐藏额外的mat-table列并显示，然后单击+按钮将其放在旁边

Question

我在我的应用程序中使用材料设计，并且我的mat-table中显示的列数是动态的。因此，如果我的列长度超过了屏幕的大小，那么我想隐藏额外的列并在我点击（+）按钮时显示它们，我将放在我的桌子旁边。当我点击该按钮时，我想显示2个隐藏的列并隐藏2个显示的列。我如何在Angular Material UI中使用它可以有人请帮助我。

Answer 1

通过这个答案。这清楚地解释了如何隐藏额外的列并显示它们

https://codepen.io/paghdalyogesh/pen/qNzGVx

<md-table-container>
    <table resize md-table md-row-select="options.rowSelection" multiple="{{options.multiSelect}}" ng-model="selected"
        md-progress="promise">
        <thead id="tablewidth" ng-if="!options.decapitate" md-head md-order="query.order" md-on-reorder="logOrder">
            <tr md-row>
                <th class="plusbuttonicon thaa0" data-title="Name" md-cell>#</th>
                <th class="Present thaa1" md-column md-order-by="name">
                    <span>Dessert (100g serving)</span>
                </th>
                <th class="Present thaa2" md-column md-order-by="type">
                    <span>Type</span>
                </th>
                <th class="Present thaa3" md-column md-numeric md-order-by="calories.value" md-desc><span>Calories</span></th>
                <th class="Present thaa4" md-column md-numeric md-order-by="fat.value">
                    <span>Fat (g)</span>
                </th>
                <th class="Present thaa5" md-column md-numeric md-order-by="carbs.value">
                    <span>Carbs (g)</span>
                </th>
                <th class="Present thaa6" md-column md-numeric md-order-by="protein.value">
                    <span>Protein (g)</span>
                </th>
                <th class="Present thaa7" md-column md-numeric md-order-by="sodium.value">
                    <span>Sodium (mg)</span>
                </th>
                <th class="Present thaa8" md-column md-numeric md-order-by="calcium.value">
                    <span>Calcium (%)</span>
                </th>
                <th class="Present thaa9" md-column md-numeric md-order-by="iron.value">
                    <span>Iron (%)</span>
                </th>
            </tr>
        </thead>
        <tbody md-body>
            <tr class="primary trid{{dessert.id}}" md-row md-select="dessert" md-on-select="logItem" md-auto-select="options.autoSelect"
                ng-disabled="dessert.calories.value > 400" ng-repeat-start="dessert in desserts.data | filter: filter.search | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
                <td class="plusbuttonicon" md-cell>

                    <md-button id="{{dessert.id}}" ng-click="movedata();" class="md-icon-button downarrow-{{dessert.id}} downarrow">
                        <i id="downarrow" class="material-icons">&#xE313;</i>
                    </md-button>
                    <md-button id="{{dessert.id}}" ng-click="movedata();" class="md-icon-button uparrow-{{dessert.id}} uparrow">
                        <i id="uparrow" class="material-icons">&#xE316;</i>
                    </md-button>
                </td>
                <td class="thaa1" data-title="Name" md-cell>{{dessert.name}}</td>
                <td class="thaa2" data-title="Type" md-cell>
                    <md-select ng-model="dessert.type" placeholder="Other">
                        <md-option ng-value="type" ng-repeat="type in getTypes()">{{type}}</md-option>
                    </md-select>
                </td>
                <td class="thaa3" data-title="Calories" md-cell>{{dessert.calories.value}}</td>
                <td class="thaa4" data-title="Fat" md-cell>{{dessert.fat.value | number: 2}}</td>
                <td class="thaa5" data-title="Carbs" md-cell>{{dessert.carbs.value}}</td>
                <td class="thaa6" data-title="Protein" md-cell>{{dessert.protein.value | number: 2}}</td>
                <td class="thaa7" data-title="Sodium" md-cell>{{dessert.sodium.value}}</td>
                <td class="thaa8" data-title="Calcium" md-cell>{{dessert.calcium.value}}%</td>
                <td class="thaa9" data-title="Iron" md-cell>{{dessert.iron.value}}%</td>
            </tr>
            <tr class="secondary childid{{dessert.id}}" ng-repeat-end></tr>
        </tbody>
    </table>
</md-table-container>
<md-table-pagination md-limit="query.limit" md-limit-options="limitOptions" md-page="query.page" md-total="{{desserts.count}}"
    md-page-select="options.pageSelect" md-boundary-links="options.boundaryLinks" md-on-paginate="logPagination"></md-table-pagination>