将数组从模态组件发送到上一个组件并显示结果-角度

Question

问题：我有一个按钮的形式可以打开模式窗口（组件）。在此模式窗口中，用户选择他希望上载的文件。点击按钮后，在模态窗口中提交。它关闭模态并停留在前一个组件中。我需要将所选文件的名称带到上一个组件并显示给用户。

The modal html在这里，我有模式HTML，用户可以在其中选择要上传的文件。之后，他单击提交，然后将文件名发送到数组。

<div class="modal-dialog modal-lg">
  <div class="modal-header">
    <h4 class="modal-title">Selecionar Assets</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
  </div>
  <div class="modal-body">
      <div class="form-group text-center">
        <input type="file" name="image" (change)="onSelectFile($event)" multiple />
      </div>
      <div class="row">
        <div class="col">
          <p class="text-center h4">Asset</p>
        </div>
        <div class="col">
          <p class="text-center h4">Name</p>
        </div>
      </div>
      <div class="row" *ngFor='let url of urls let i = index'>
        <div class="col">
          <div class="text-center image-preview img-responsive mb-3">
            <img [src]="url" height="100" width="100"/>                 
          </div>
        </div>
        <div class="col trimText">
          <div class="text-center mb-3">
            <p class="text-center"> {{ names[i] }}</p>             
          </div>
        </div>
      </div> 
      <div class="form-group text-center">
          <button class="btn btn-primary" (click)="onSubmit(); activeModal.dismiss('Cross click')">Submit</button>
      </div>
    </div>
</div>

模态组件。ts在这里，我要遍历用户选择的多个文件并获取这些文件的名称。当单击按钮提交时，我将该数组发送到打开模式的组件。

@Input() names:Array<string> = [];
@Output() namesEntry: EventEmitter<string[]> = new EventEmitter();


onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
        var filesAmount = event.target.files.length;
        for (let i = 0; i < filesAmount; i++) {
            this.names.push(event.target.files[i].name);
              var reader = new FileReader();
                reader.onload = (event:any) => {
                  this.urls.push(event.target.result); 
                }
                reader.readAsDataURL(event.target.files[i]);
        }
        console.log(this.names);
    }
  }


onSubmit() {
    //send to form name of the assets
      this.activeModal.close(this.names);
}

表格html在组件的这一部分中，我要显示模态中具有的文件名。问题是，即使数组names不为空且isActive为真，也从未显示过。

    <div id="assets" class="text-center" *ngIf="isActive; else notActive">
        <ng-template #notActive>
            <div *ngFor='let name of names'>
                <p class="h6">{{name}}</p>
            </div>
        </ng-template>
    </div>
表单component.ts

在这里，我从模态中检索到此组件的名称数组，然后在执行console.log的this.names时返回包含名称的数组，而this.isActive则返回true。

  names:Array<string> = [];
  isActive = false;
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(AssetComponent, {size:"lg", backdrop: 'static'});
    modalRef.componentInstance.title = 'asset';
    modalRef.result.then((result) => {
      if (result) {
      this.names = result; 
      this.isActive = true;
      }
    });  
  }

问题：我有一个按钮，可以打开模式窗口（组件）。在此模式窗口中，用户选择他希望上载的文件。点击按钮后，在模态窗口中提交。 ...

Answer 1

请将代码更改为以下代码。

Answer 2

请更新您的模板以正确呈现，在*ngIf条件下，模板应位于条件元素之外