以角度2

Question

问题

我正在搜索这个答案，但不是在我的条件下工作。 OnInIt我从api获取用户数据，并在*ngFor内的表格中显示用户状态。用户状态IsActive的范围是一个范围。当我点击特定的跨度时，它会在该行上显示下拉并隐藏其跨度，并在选择它后下拉隐藏和跨度再次显示。我希望这个特定行而不是表的所有行。我已经完成了下拉功能，但是span hide没有按预期工作。在图像1中，我想只隐藏特定的跨度而不是全部

我使用spanHide : any= {}; 并用false初始化它;

Object.keys(this.spanHide ).forEach(h => {
    this.spanHide [h] = false;
});

但它不起作用

image1的

IMAGE2

代码

    spanHide: boolean = false;
    selectHide: any = {};
    constructor(
        private userService: UserService,
        private notificationService: NotificationsService) {
        this.progress = 'loading';

    }


    ngOnInit() {
        this.userService.getAllUser()
            .subscribe(data => {
                this.isAuthorized = true;
                this.data = data;
                this.progress = 'active';
            },
            error => {
                console.log("error while retriving users");
                console.log(error);
                this.userService.handleError(error);
            });
    }
    onChange(id, i) {
        this.selectHide[i] = false;
        this.spanHide = false; 
        this.userService.changeStatus(id)
            .subscribe(data => {
                this.data = data.json();
            },
            error => console.log(error),
            () => {
                this.userService.getAllUser() // TODO: Ahmed : fix this. it should not be called again
                    .subscribe(data => this.data = data,
                    error => {
                        console.log("error while retriving users");
                        this.userService.handleError(error);
                    });
                this.notificationService.success('Success', 'user status changed', { id: 123 });
            });

    }
    show(item) {
        this.spanHide = true;
        Object.keys(this.selectHide).forEach(h => {
            this.selectHide[h] = false;
        });
        this.selectHide[item] = true;
    }

}    constructor(
        private userService: UserService,
        private notificationService: NotificationsService) {
        this.progress = 'loading';

    }


    ngOnInit() {
        this.userService.getAllUser()
            .subscribe(data => {
                this.isAuthorized = true;
                this.data = data;
                this.progress = 'active';
            },
            error => {
                console.log("error while retriving users");
                console.log(error);
                this.userService.handleError(error);
            });
    }
    onChange(id, i) {
        this.selectHide[i] = false;
        this.spanHide = false; 
        this.userService.changeStatus(id)
            .subscribe(data => {
                this.data = data.json();
            },
            error => console.log(error),
            () => {
                this.userService.getAllUser() // TODO: Ahmed : fix this. it should not be called again
                    .subscribe(data => this.data = data,
                    error => {
                        console.log("error while retriving users");
                        this.userService.handleError(error);
                    });
                this.notificationService.success('Success', 'user status changed', { id: 123 });
            });

    }
    show(item) {
        this.spanHide = true;
        Object.keys(this.selectHide).forEach(h => {
            this.selectHide[h] = false;
        });
        this.selectHide[item] = true;
    }

}

的HTML

＆＃13;

＆＃13;

<table class="table">
                    <thead>
                        <tr>
                            <th><search-box (update)="term=$event"></search-box></th>
                            <th><invite-user *authorizeUser="invitePermission"></invite-user></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let user of data |search: term | paginate: config; let i=index">
                            <!--<td>{{ (config.currentPage - 1) * config.itemsPerPage + i +1 }}</td>-->
                            <!--<td style="width:15px;"><input type="checkbox"/></td>-->

                            <td class="col-xs-10">
                                <h4 style="margin-bottom:0px;"><a [routerLink]="['/user-edit', user.Id]" style="text-transform: capitalize;">{{user.FirstName}} {{user.LastName}}</a></h4>
                                <p style="margin-bottom:0px;">{{user.Email}}</p>
                                <p class="margin-bottom-5"><i class="fa fa-user"></i> Developer</p>
                            </td>
                            <td class="col-xs-2">
                                <span id="span" *ngIf="spanHide == false" (click)="show(i)">

                                        <span *ngIf="user.IsActive== true"><i class="fa fa-check"></i>Active</span>
                                        <span *ngIf="user.IsActive== false"><i class="fa fa-trash-o"></i>Block</span>
                                        <i class="fa fa-pencil"></i>
                                    
                                </span>
                                <section *ngIf="selectHide[i] == true">
                                    <label class="select">
                                        <select (change)="onChange(user.Id,i)" >
                                            <option disabled>Select</option>
                                            <option *ngIf="user.IsActive == true">Block</option>
                                            <option *ngIf="user.IsActive == false">Active</option>
                                        </select>
                                        
                                    </label>
                                </section>
                            </td>
                        </tr>
                    </tbody>
                </table>

＆＃13;

＆＃13;

＆＃13;