1

序文: 私は Meteor、Angular、および Typescript を初めて使用するので、ここのどこかに XY 問題が発生する可能性が非常に現実的です。

Meteor と Angular 2 ( angular2-meteorパッケージを使用) を使用して単純なプロジェクト管理アプリに取り組んでおり、(今のところ) 構造はイベントを持つプロジェクトで構成されています。1 つのビューはプロジェクトのリストです。プロジェクトをクリックすると、プロジェクトのイベントのリストを含む、プロジェクトの詳細のモーダルが表示されます。したがって、3 つのコンポーネント: ProjectList、ProjectDetails、およびProjectEventsList。変数をProjectDetails使用して、表示するプロジェクトを認識し、それが機能します。Sessionただし、モーダル内のイベントのリストは、最初にクリックされたプロジェクト用に作成された後、更新されません。

ProjectEventsList.ts

import {Component, View} from 'angular2/core';
import {MeteorComponent} from 'angular2-meteor';

import {ProjectEvents} from 'collections/ProjectEvents';


@Component({
    selector: 'projectEventsList',
    inputs: ['projectId']
})

@View({
    templateUrl: '/client/projectEventsList/projectEventsList.html'
})

export class ProjectEventsList extends MeteorComponent {
    projectEvents: Mongo.Cursor<ProjectEvent>;

    projectId: string;

    constructor() {
        super();

        this.subscribe('projectEvents', this.projectId, () => {
            this.autorun(() => {
                this.projectEvents = ProjectEvents.find({projectId: this.projectId});
            }, true);
        });
    }
}

私が理解しているように (私はここから離れているかもしれませんが) autorun、まあ、自動的に実行するのに苦労しています。ゲッターとセッターを配置しようとしましprojectIdたが、プロジェクトをクリックすると更新されますが、最初のクリック後に内部のコードがautorun実行されません。私が試したこと：

  • subscribe()との入れ子を切り替えautorun()ます。
  • subscribe()と の両方にautobind 引数を追加/削除しautorun()ます。私はそれが何をしているのか本当に理解していません。

  • サブスクライブ コードを のセッターに移動しますprojectId。

    private _projectId: string = '';
get projectId() {
    return this._projectId;
}
set projectId(id: string) {
    this._projectId = id;

    this.subscribe('projectEvents', this._projectId, () => {
        this.projectEvents = ProjectEvents.find({projectId: this._projectId});
    }, true);
}

    これを行うと、リストにアイテムが表示されなくなります。

これでうまくいくように思えたら、小さなテスト ケースを作成して投稿しますが、知っている人にとっては、ここに何かが明らかに間違っていることを願っています。ありがとう！

4

2 に答える 2

0

以下に示すように、最終的にセッターメソッドが機能するようになりました。不格好に感じるので、これを行うためのよりクリーンな方法があることを願っていますが、現在は以下が機能しています (つまり、親コンポーネント (ProjectList)projectIdが入力に new を送信すると、イベントのリストが更新されます。

ProjectEventsList.ts

import {Component, View} from 'angular2/core';
import {MeteorComponent} from 'angular2-meteor';

import {ProjectEvents} from 'collections/ProjectEvents';


@Component({
    selector: 'projectEventsList',
    inputs: ['projectId']
})

@View({
    templateUrl: '/client/projectEventsList/projectEventsList.html'
})

export class ProjectEventsList extends MeteorComponent {
    projectEvents: Mongo.Cursor<ProjectEvent>;

    set projectId(id: string) {
    this._projectId = id;

    this.projectEventsSub = this.subscribe('projectEvents', this._projectId, () => {
        this.projectEvents = ProjectEvents.find({projectId: this._projectId}, {sort: { startDate: 1 }});
    }, true);
}

get projectId() {
    return this._projectId;
}

    constructor() {
        super();

        this.subscribe('projectEvents', this.projectId, () => {
            this.projectEvents = ProjectEvents.find({projectId: this.projectId});
        }, true);
    }
}
于 2016-02-05T19:58:38.147 に答える