2017-05-19 18 views
0

私はこのようにngForを持っています。薄くなり動的コンポーネントのコンテンツを変更する角度2

<a (click)='onOpen(object)'>Details</a> 

のような結合事象と

<div *ngFor="let object of objects; let i = index" class="discover__col"> 

私はこのようなダイナミックなモーダルを持っています。

dynamicModal(object): void { 
    const modal$ = this.modalService.create(SharedModule,  DynamicModalComponent, { 
     title: object.title, 
     desc: object.desc 
    } 

タイルとdescが取得されるのは未定義です。

ngForループで反復処理しているオブジェクトをどのように渡すことができますか?

ModalService

@Injectable() 
export class ModalService { 
    private vcRef: ViewContainerRef; 
    private injector: Injector; 
    public activeInstances = 0; 

    constructor(private compiler: Compiler) { 
    } 

    registerViewContainerRef(vcRef: ViewContainerRef): void { 
    this.vcRef = vcRef; 
    } 

    registerInjector(injector: Injector): void { 
    this.injector = injector; 
    } 

    create<T>(module: any, component: any, parameters?: Object): 
Observable<ComponentRef<T>> { 
    const componentRef$ = new ReplaySubject(); 
    this.compiler.compileModuleAndAllComponentsAsync(module) 
    .then(factory => { 
    const componentFactory = factory.componentFactories.filter(item => item.componentType === component)[0]; 
    const childInjector = ReflectiveInjector.resolveAndCreate([], this.injector); 
    const componentRef = this.vcRef.createComponent(componentFactory, 0, childInjector); 
    Object.assign(componentRef.instance, parameters); // pass the @Input parameters to the instance 
    this.activeInstances ++; 
    componentRef.instance["componentIndex"] = this.activeInstances; 
    componentRef.instance["destroy"] =() => { 
     this.activeInstances --; 
     componentRef.destroy(); 
    }; 
    componentRef$.next(componentRef); 
    componentRef$.complete(); 
    }); 
return <Observable<ComponentRef<T>>> componentRef$.asObservable(); 
    } 
} 

エンドサービス

これはオブジェクト{ 'title':'test', 'desc':'test2', }

これは親

<objects [objects]='objects' (open)='objectModal(object)'></objects> 

この子コンポーネント

であります
<div *ngFor='object of objects'> 
    <object-component (click)='onOpen(object)'></object-component> 
</div> 

@Output() open: EventEmitter<Object> = new EventEmitter<Object>(); 

onOpen(object) { 
    this.open.emit(object); 
} 

私はtitle: 'test', title: 'test2'

をすれば、それは正常に動作します。

しかし、クリックしたngForオブジェクトから情報を取得する必要があります。基本的には、情報を親に渡す方法ではなく、インデックスではなく、実際のオブジェクト自体に渡す方法ではありません。だから私はこれを行うことができます、それは未定義ではありません。

title: service.title, 
title: service.desc, 
+0

モーダルサービスコードを転記することができますか?そのオブジェクトにはtitleプロパティとdescプロパティがありますか? – mikias

+0

yea、それらのプロパティは存在します –

+0

あなたは 'onOpen(object)'ハンドラを持っていますが、あなたは 'dynamicModal'関数のコードを表示しています。彼らはどのように関係していますか? – lbrahim

答えて

0

私はそれがあるべきあなたがここに

(open)='objectModal(object)' 

<objects [objects]='objects' (open)='objectModal(object)'></objects> 

あるいは、より正確には、このコードでミスを犯したことを疑う

(open)='objectModal($event)' 

Plunker Example

+0

回答が役に立ちましたか? – yurzui

関連する問題