Question

我想了解如何使用以下代码显示/隐藏列。

TS文件-

import { Component, OnInit } from '@angular/core';
import { TableService } from './table.service';
import { Issue } from './issues';
import { CheckboxControlValueAccessor } from '@angular/forms';

@Component({
    selector: 'app-table',
    templateUrl: './table.component.html',
    styleUrls: ['./table.component.css']
})

export class TableComponent implements OnInit {

    constructor(private tservice: TableService) { }
    characters: Issue[];

    settings = {
        columns: {
            id: {
                title: 'ID',
                editable: false
            },
            description: {
                title: 'Description'
            },
            severity: {
                title: 'Severity',
                editor: {
                    type: 'list',
                    config: {
                        selectText: 'Select',
                        list: [
                            { value: 'Minor', title: 'Minor' },
                            { value: 'Major', title: 'Major' },
                            { value: 'Critical', title: 'Critical' },
                        ],
                    },
                },
            },
            status: {
                title: 'Status',
                editor: {
                    type: 'list',
                    config: {
                        selectText: 'Select',
                        list: [
                            { value: 'Open', title: 'Open' },
                            { value: 'In progress', title: 'In progress' },
                            { value: 'Closed', title: 'Closed' },
                        ],
                    },
                },
            },
            created: {
                title: 'Created'
            },
            resolved: {
                title: 'Resolved'
            },
        }
    };

    ngOnInit() {
        this.tservice.getCharacters().subscribe((data: Issue[]) => {
        this.characters = data;
        });
    }
}

HTML代码-

<p>Issue Tracker</p>

<ul>
    <li><input type="checkbox" [(ngModel)]=showIssueId/> ID </li>
    <li><input type="checkbox" [(ngModel)]=showDesc/> Description</li>
    <li><input type="checkbox" [(ngModel)]=showSeverity/> Severity</li>
    <li><input type="checkbox" [(ngModel)]=showStatus/> Status</li>
    <li><input type="checkbox" [(ngModel)]=showCreated/> Created</li>
    <li><input type="checkbox" [(ngModel)]=showResolved/> Resolved</li>
</ul>
<button class="updateColumn" title="Update Columns" (click)="updateColumns()">Update Table</button>

<ng2-smart-table [settings]="settings" [source]="characters">
</ng2-smart-table>

Answer 1

Arno van den Brink提供了一种解决方案，方法是修改ng2-smart-table模块以解决您面临的确切问题。您可以找到它here

如何使用复选框显示/隐藏ng2智能表中的列

1 个答案: