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

问题：我有一个窗体中的按钮，可以打开模式窗口（组件）。在此模式窗口中，用户选择要上载的文件。单击模式窗口中的“输入”按钮后提交。它关闭模态并保持在上一个组件中。我需要将所选文件的名称添加到上一个组件并显示给用户

模式html 在这里，我有一个模式html，用户可以在其中选择要上传的文件。 之后，他单击submit并将文件名发送到一个数组

<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 这里是我从模式中检索名称数组到此组件的位置，以及我执行

console.log

of

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;
      }
    });  
  }

名称：数组=[]；
isActive=假；
构造函数（私有modalService:NgbModal）{}
开（）{
const modalRef=this.modalService.open（AssetComponent，{size:'lg'，background:'static'}）；
modalRef.componentInstance.title='资产'；
modalRef.result.then（（结果）=>{
如果（结果）{
this.names=结果；
this.isActive=true；
}
});  
}

请将代码更改为以下内容

 <div id="assets" class="text-center" *ngIf="isActive">
     <div *ngFor='let names of names'>
       <p class="h6">{{name}}</p>
     </div>
  </div>

{{name}

你的情况不对。它不会呈现数据，因为isActive标志设置为true，并且模板设置为在isActive标志为false时呈现

请记住，*ngIf中的模板（

）只有在满足条件时才可用

比如说,

<div *ngIf="test else nodData">
  Data Available
  <template #nodData>No Data available</template>
</div>

可用数据
没有可用的数据

当ngIf条件满足时，模板节点数据将不可用。所以noData不会显示。因此，在其他条件下，始终将ref保持在ngIf块之外

<div *ngIf="test else nodData">
  Data Available      
</div>
<template #nodData>No Data available</template>

可用数据
没有可用的数据

请更新模板以正确渲染， 在

*ngIf

条件中，模板应位于条件元素之外

<div id="assets" class="text-center" *ngIf="isActive; else notActive">
   <div *ngFor='let names of names'>
      <p class="h6">{{name}}</p>
   </div>
</div>

<ng-template #notActive>
   // Your message or code
</ng-template>

{{name}
//您的信息或代码

您的情况不正确。它不会呈现数据，因为isActive标志设置为true，并且模板仅在isActive标志为false时才会呈现。当isActive为true时是否显示名称？@ppgowda4是当is值为true时我要显示名称

<div *ngIf="test else nodData">
  Data Available      
</div>
<template #nodData>No Data available</template>

<div id="assets" class="text-center" *ngIf="isActive; else notActive">
   <div *ngFor='let names of names'>
      <p class="h6">{{name}}</p>
   </div>
</div>

<ng-template #notActive>
   // Your message or code
</ng-template>