Question

更改清单数据中的值时出现问题，我有一个表批准领导者包括复选框和其他数据。我无法更改检查数据中的值。

这是我的桌子图片

这是我在component.ts中的代码

import { Component, OnInit, Inject } from '@angular/core';
import { AlertService } from '../../../../component/alert/alert.service';
import { BookingMeetingRoomModel } from '../../../../model/booking-meeting-room.model';
import { ApprovalLeaderService } from './approval-leader.service';


@Component({
    selector: 'approval-leader',
    templateUrl: 'approval-leader.component.html'
})
export class ApprovalLeaderComponent implements OnInit {
    public approvalLeaders: BookingMeetingRoomModel[];
    public approvalLeader: BookingMeetingRoomModel;
    public format_time: string = 'HH:mm';
    public date_time: Date;
    public loaded: boolean = true;
    public btnControl: boolean = true;
    public showForm: string = 'this';
    public isRefresh: boolean = false;
    public selectedEntity: boolean = false;

    // public data;
    public filterQuery = '';
    public rowsOnPage = 10;
    public sortBy = 'Name';
    public sortOrder = 'asc';

    constructor(
        private alertService: AlertService,
        private approvalLeaderService: ApprovalLeaderService,
    ) { }

    public ngOnInit(): void {    
        this.date_time = new Date();    
        this.getData();   
    }
    private getData(): void {
        this.loaded = false;
        this.approvalLeaderService.getAll().subscribe(s => {
            this.approvalLeaders = s;
            this.loaded = true;
        }, e => { 
          this.loaded = true; 
          this.alertService.error(e.status, e.statusText, e._body); });
    }

    // navigate form parent to child section
    public goThis(refresh: boolean): void {
        this.showForm = 'this';
        if (refresh === true) { this.isRefresh = true; this.getData(); }
    }

    public setSelectedEntity(check: boolean, mf) {
        if(mf !== null && mf !== undefined){
            mf.data.forEach(f => {
                    f.isSelector= check;
                    f.approvalL1UserStatus = 1;
                    console.log(f.isSelector);
            })
        }

    }

    public isSelection(mf) {
        if (mf === null || mf.undefined) return false;
        if (mf.data.some(s => s.isSelector == true) === true) return true;
        else return false;
     }

     public onApprove(mf){
        if (mf === null || mf.undefined) return;
        if (!this.btnControl) { return; }
        this.btnControl = false;
        let approved = mf.data.filter(f => f.isSelector == true);


        this.approvalLeaderService.save(approved)
            .subscribe(
                s => {
                    this.alertService.success('Booking Approved');
                    this.btnControl = true;
                },
                e => {
                    this.btnControl = true;
                    this.alertService.error(e.status, e.statusText, e._body);
                });
                console.log(approved);
     }

     public onReject(mf){
        if (mf === null || mf.undefined) return;
        if (!this.btnControl) { return; }
        this.btnControl = false;
        let approved = mf.data.filter(f => f.isSelector == true )
        this.approvalLeaderService.save(approved)
            .subscribe(
                s => {
                    this.alertService.success('Booking Rejected');
                    this.btnControl = true;
                },
                e => {
                    this.btnControl = true;
                    this.alertService.error(e.status, e.statusText, e._body);
                });
                console.log(approved);
     }
}

这是我的component.html

<div [hidden]="showForm !== 'this'" [hidden]="showForm !== 'this'" class="card animated fadeIn">
    <div class="card-header">
        <strong>{{ 'Approval Event' | translate }}</strong>
    </div>
    <div class="card-body">
        <div class="row animated fadeIn" *ngIf="loaded else loading">
            <div class="col-md-6">
                <div class="form-group form-inline">
                    <label class="label-control">{{ 'Show row' | translate }} &nbsp; &nbsp;</label>
                    <select class="form-control input-sm" [(ngModel)]="rowsOnPage">
                        <option [ngValue]="5">5</option>
                        <option [ngValue]="10">10</option>
                        <option [ngValue]="15">15</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <div class="d-flex flex-row-reverse">
                        <input class="form-control" [(ngModel)]="filterQuery" placeholder="{{ 'Search Name' | translate }}.." />
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <table class="table table-striped" [mfData]="approvalLeaders | dataNameFilter : filterQuery" #mf="mfDataTable"
                    [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
                    <thead>
                        <tr>
                            <th style="width: 7%">
                                All <input type="checkbox" [checked]="selectedEntity" (change)="selectedEntity = !selectedEntity; setSelectedEntity(selectedEntity, this.mf)">
                            </th>
                            <th style="width: 10%">
                                <mfDefaultSorter by="employee">{{ 'Employee Name' | translate }}</mfDefaultSorter>
                            </th>
                            <th style="width: 15%">
                                <mfDefaultSorter by="location">{{ 'Location' | translate }}</mfDefaultSorter>
                            </th>
                            <th style="width: 15%">
                                <mfDefaultSorter by="meetingroom">{{ 'Meeting Room' | translate }}</mfDefaultSorter>
                            </th>
                            <th style="width: 10%">
                                <mfDefaultSorter by="dateFrom">{{ 'Date From' | translate }}</mfDefaultSorter>
                            </th>
                            <th style="width: 10%">
                                <mfDefaultSorter by="dateTo">{{ 'Date To' | translate }}</mfDefaultSorter>
                            </th>
                            <th style="width: 10%">
                                <mfDefaultSorter by="bookingType">{{ 'Agenda' | translate }}</mfDefaultSorter>
                            </th>
                            <th style="width: 20%">
                                {{ 'Status' | translate }}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let approvalL1 of mf.data">
                            <td>
                                <input *ngIf=" approvalL1.approvalL1UserStatus !== 1"
                                    type="checkbox" [checked]="approvalL1.isSelector" (change)="approvalL1.isSelector = !approvalL1.isSelector" />
                            </td>
                            <td>{{ approvalL1.employee.name }}</td>
                            <td>{{ approvalL1.meetingRoom.location.name }}</td>
                            <td>{{ approvalL1.meetingRoom.name }}</td>
                            <td>{{ approvalL1.bookingTime }}</td>
                            <td>d</td>
                            <td>{{approvalL1.agenda }}</td>
                            <td>{{ approvalL1.approvalL1UserStatus | approvalL1User }}</td>
                        </tr>

                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="5">
                                <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
                            </td>
                        </tr>
                    </tfoot>
                </table>
                <button class="btn btn-sm btn-success mr-3" (click)="onApprove(this.mf)"><i class="fa fa-check"></i>&nbsp; {{ 'Approve' | translate }}</button>
                <button class="btn btn-sm btn-danger"><i class="fa fa-close"></i>&nbsp; {{ 'Reject' | translate }}</button>
            </div>
        </div>
        <ng-template #loading>
            <loader></loader>
        </ng-template>
    </div>
</div>

所以问题是我无法更改数组数据检查表中的值（您可以在表的图片中看到输出json），我想更改值模型rovalerLeaderUserStatus = 1。

更改清单数据中的值

0 个答案: