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

Question

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

模态 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>

表单组件.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

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

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

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

请记住，*ngIf 中的 Template(<tempalte #ref></template>( 只有在满足条件时才可用。

例如

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

模板 nodData 将不可用，满足 ngIf 条件。所以 noData 不会显示。所以总是将引用保持在 ngIf 块之外，以用于其他条件

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

Answer 2

请更新您的模板以正确呈现， 在*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>