Question

我是角色2的新手。我正在上传文件并在模板中显示它们。当我按下删除时选中复选框，它不会从列表中删除所需的文件。以下是我的代码

模板

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
<table cellpadding="4" class="grid" >
<thead><tr><th></th><th>Document Name</th><th>Document ID</th><th>Document Type</th><th>Source</th>
<th>Document Date</th><th>Trip ID</th><th>Notes</th><th>Action</th></tr></thead>
<tbody *ngFor="let file of files">
    <tr >
    <td class="form-group"><input type="checkbox" [checked]="checked"></td>
    <td class="form-group"><input type="text" class="form-control" ngControl="file.name">{{file.name}}</td>
    <td class="form-group"><input type="text" class="form-control" ngControl="documentId"></td>
    <td class="form-group"><input type="text" class="form-control" ngControl="type"></td>
    <td class="form-group"><input type="text" class="form-control" ngControl="source"></td>
<td class="form-group"><input type="date" class="form-control" ngControl="date"></td>
<td class="form-group"><input type="text" class="form-control" ngControl="tripId"></td>
<td class="form-group"><input type="text" class="form-control" ngControl="notes"></td>
        <td class="form-group">
            <a (click)="remove(file)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a> 

        </td>
    </tr>

</tbody>

</table>
<!-- save button -->
<button type="submit" class="form-group" class="btn  btn-primary " >Save</button>
</form>

组件

import {Component, OnInit, OnChanges} from '@angular/core';
import {NgClass, FORM_DIRECTIVES } from '@angular/common';
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {FleetService} from '../../fleet/fleetControlPanel/fleetControlPanelService';
import {DocumentManagementService} from './documentManagementService';

@Component({
    selector: 'documentManagement',
    templateUrl: 'app/dashboard/features/documents/documentManagement/documentManagementTemplate.html',
    directives: [ROUTER_DIRECTIVES, NgClass, FORM_DIRECTIVES ]
})

export class DocumentManagementComponent implements OnInit, OnChanges {


    file: any[];
    files: any[] = [];
    trucks: any[];
    errorMessage: any;
    checked: boolean ;

    // constructor to loop the products in product service file and disply in html
    constructor(private _fleetService: FleetService, private _documentManagementService: DocumentManagementService ){

    }

    ngOnInit(): void {
        this._fleetService.getFleets()
             .subscribe(
                 fleets => {
                     this.trucks = fleets
                 },
                 error => this.errorMessage = <any>error)
    }

    ngOnChanges(): void {

    }

    onClickUploadDocument(event){
        console.log("clicked")
        var file = event.target.files;

    console.log("file: ",file);

    for (let i = 0; i < file.length; i++) {
        var fileInfo = file[i];
         console.log("files are: ",fileInfo);
         this.files.push(fileInfo);

    } 

    }

     remove(file: any){

         console.log("delete file:..", file)
         if (this.checked == true) {
              this.files.splice(file)
         }


     }

}

有人可以告诉我代码中的错误，并为我提供解决方案。

Answer 1

回答上述问题

remove(file: any){

         console.log("delete file:..", file)

          var index = this.files.indexOf(file);
        this.files.splice(index, 1)

     }

Angular 2从上传的文件列表

1 个答案: