1

私は Angular2 を初めて使用し、Mongo.Collection オブジェクトのレジストリを管理するサービスを使用するカスタム コンポーネントを取得しようとしています。私の問題は、コレクションがロードされたときに Angular で UI を更新できないように見えることです。

以下のコードを見ると、DatasetService が注入されたコンポーネントがあることがわかります。このサービスは、コレクションのレジストリを管理します。この問題は、Meteor.autorun() メソッドが Angular の「ゾーン」から処理を取り出すという事実に関連していると推測していますが、どうにかしてプロセスを Angular ゾーン/ダイジェストに再注入する必要がありますか?

クライアントとサーバーの両方:

export const Meetings = new Mongo.Collection<any>('meetings');

サーバーのみ

Meteor.publish('meetings', function(options: any) {
  return Meetings.find({});
});

クライアントのみ

class Dataset {
  cursor: Mongo.Cursor<any>;
  loading: boolean = true;

  constructor( public collection: Mongo.Collection<any> ) {
    Tracker.autorun(() => {
      this.loading = true;
      Meteor.subscribe('meetings', {}, () => {
        this.cursor = this.collection.find({});
        this.loading = false;
      });
    });
  }
}

@Injectable()
class DatasetService {
  datasets: Dataset[] = [];

  register( id: string, collection: Mongo.Collection<any> ) : Dataset {
    return this.datasets[id] = new Dataset( collection, options );
  }
}

@Component({
  selector: 'meetings-list',
  template: `<ul><li *ngFor="let meeting of meetings.cursor">{{meeting.name}}</li></ul>`,
  viewProviders: [DatasetService]
})
class MeetingsListComponent extends MeteorComponent implements OnInit {
  meetings: Dataset;

  constructor(private datasetService: DatasetService) {
    super();
  }

  ngOnInit() {
    this.meetings = this.datasetService.register( 'meetings', Meetings );
  }

  checkState() {
    console.log(this.loading);
  }
}

ページを読み込んでも、ミーティングのリストが表示されません。ただし、ボタンをクリックして「checkState()」を手動で呼び出すと、UI が更新され、会議がレンダリングされます。

私がやろうとしていることを達成するための助け、明快さ、または別の方法は大歓迎です!

4

1 に答える 1