Question

我最近遇到了一些问题，试图让旋转木马组件正常运行的自定义模态窗口。我对Angular很新，所以我遇到了达到预期效果的问题。我的目标是从可能有一系列图像的服务接收数据。如果存在图像，将显示将打开自定义模式对话框的glyphicon按钮。我想将这些图像数组传递给模态轮播窗口进行浏览。

到目前为止，我可以打开模态窗口，但是如果它确实显示了图像，那么对于每一行，它将是相同的图像集，无论它是否具有与该行相关联的不同图像。有些甚至根本不会显示图像。

目录-list.component.html

<tbody>
      <tr *ngFor='let catalog of catalogs'>
                        <td>{{ catalog.Catalog }}</td>
                        <td>{{ catalog.Description }}</td>
                        <td>{{ catalog.OnHand }}</td>
                        <td>{{ catalog.InTransit }}</td>
                        <td>{{ catalog.CustomerHold }}</td>
                        <td>{{ catalog.NetInventory }}</td>
                        <td>{{ catalog.Scheduled }}</td>
                        <td>
                            <div data-toggle='modal' data-target='#myModal' *ngIf='catalog.Images.length > 0'>
                                <a class="picture image-gallery-launcher" href="#myGallery" role="button" title="View Images"> 
                                    <span class="glyphicon glyphicon-picture"></span>
                                </a>                                     
                            </div>
                        </td>
                        <cm-image-gallery [gallery]='catalog.Images'></cm-image-gallery>
                    </tr>                        
                </tbody>

图片-gallery.component.ts

import { Component, Input } from "@angular/core";
import { IGallery } from "./image-gallery";
import { OnInit } from "@angular/core/src/metadata/lifecycle_hooks";

@Component({
    selector: 'cm-image-gallery',
    templateUrl: './image-gallery.component.html'
})
export class ImageGalleryComponent implements OnInit{
    @Input() gallery: IGallery[];

    ngOnInit(){
        console.log(this.gallery);
    }
}

图片-gallery.component.html

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <div class="pull-left">Catalog Viewer</div>
            <button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button>
        </div>
        <div class="modal-body">        
            <div style="position: relative;" *ngIf="gallery != []">
                <div id="myGallery" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#myGallery" *ngFor="let x of gallery;let i = index" [attr.data-slide-to]="i" ngClass="i == 0 ? 'active' : ''"></li>
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div *ngFor="let j of gallery; let k = index" [ngClass]="k == 0 ? 'item active' : 'item'">
                            <img [src]=gallery[k] height="400" width="400">
                            <div class="carousel-caption">
                                <!-- <h3>{{gallery[k].name}}</h3>
                                <p>{{gallery[k].description}}</p> -->
                            </div>
                        </div>
                    </div>                  
                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myGallery" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myGallery" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
            <!-- Gallery Code end -->        
        </div>
        <div class="modal-footer">
            <button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Answer 1

我最终通过在catalog-list.component.ts

中创建输出来解决这个特定问题

<强>目录-list.component.ts

@Output() //used so that the image gallery gets the catalog the user selects in the table
selectedCatalog: EventEmitter<ICatalog> = new EventEmitter<ICatalog>();

setCurrentCatalog(catalog: ICatalog) : void{
    this.selectedCatalog.emit(catalog);
}

然后在image-gallery.component.ts

中收听它

图片-gallery.component.ts

constructor(private _catalogList : CatalogListComponent){ this._catalogList.selectedCatalogGallery .subscribe(catalogs => { this.gallery = catalogs.Images; }, error => console.log(error)); }

这可确保图库获取正确的行对象，而不是始终默认为第一行。

将数据传递到Angular中的自定义模式对话框

1 个答案: