Angular render component trước khi data về

vậy thì đợi data trả về rồi mới binding data vào.
Dùng promise cũng được

MDN Web Docs

Promise

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

Cám ơn anh cơ mà thực sự thì em chưa hiểu về promise lắm . . .

Trong trường hợp của em . . .

Em đứng từ component gọi tới hàm get data ở services . . .

Vậy dùng promise ở services hay tại component ta . . .

promise ở service chứ
dạng vậy nè

static receiveFeed(id) {
    const path = id
    console.log(id)
    return new Promise((resovle, reject) => {
      //httpGet(path,{})
      //.then((res) => {
      console.log(reject)
      const feeds = require(path)
      const feed = _.map(feeds.data, (item) => {
        return this.populateFeed(item)
      })
      resovle(feed)
      //})
      //.catch((err) => {
      //  reject(err)
      //})
    })
  }

sau đó gọi như vầy:

Feed.receiveFeed(id).then((feedData) => {
        //populate data
      })

Cám ơn anh vì mất chút thời gian . . .

Cơ mà hơi khó để trình bày chút thì đoạn code component của em nó như này . . .

  ngOnInit() {

    // Get course //
    this._courseService.courses.subscribe(newcourse => {
      this.courses = newcourse;
      console.log(this.courses);
    });
    this._courseService.getCourses();

    // Get front end courses //
    this.frontends = this.filterCourse('front-end');
    console.log('front-end courses after filter');
    console.log(this.frontends);

    // Get back end courses //
    this.backends = this.filterCourse('back-end');
    console.log('back-end courses after filter');
    console.log(this.backends);

  }

Em debug thì hiểu là data lúc get ở chỗ “this._courseService.getCourses();” nó chưa kịp next . . .

Thì đã chạy tiếp hàm phía dưới . . .

Thì phải chăng mình nên promise ở đây không ta . . .

this._courseService.getCourses()

nếu bên kia tra về promise thì nó nó phải như thế này

this._courseService.getCourses().then(rs){
// Get front end courses //
    this.frontends = this.filterCourse('front-end');
    console.log('front-end courses after filter');
    console.log(this.frontends);

    // Get back end courses //
    this.backends = this.filterCourse('back-end');
    console.log('back-end courses after filter');
    console.log(this.backends);
}

Ô cám ơn anh . . .

Nhìn có vẻ hiểu rồi . . .

Để chiều làm về thử phát . . .

Hoặc bạn có thể dùng async await function.

Cái này hình như là cải tiến của promise nè phải không ta . . .

Để em tham khảo thử . . .

Tặng bạn đoạn code này

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script>
<script>
  var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    storageBucket: "",
    messagingSenderId: ""
  };
  firebase.initializeApp(config);
</script>
<script>
    var app = angular.module('myApp', ["firebase"]);
    app.controller('myCtrl', function($scope,$firebaseArray) {
		$scope.msg1="hello world";
		var ref = firebase.database().ref().child("msg");
		$scope.msg=$firebaseArray(ref);
    });
</script>
<div ng-app="myApp" ng-controller="myCtrl">
    $scope.msg :{{msg1}}<br>
    <div ng-repeat="x in msg">
    	$id : {{x.$id}}<br>
    	nd : {{x.nd}}<br>
    	date : {{x.date}}<br><br>
    </div>
</div>

Cái này trong tàng kinh các của mình, bảo đảm chạy, chịu khó áp dụng vào trường hợp bạn.

Hay bạn vào trang
vibigaba.esy.es
có đoạn code tương tự thế

Cám ơn bác . . .

Em mới chỉ get data thử thôi chứ chưa tới đây nữa hehe . . .

khuyên bạn 1 câu, lên youtube học mấy khóa angular mấy trung tâm post lên, mày mò xào nấu sẽ hiểu đc khoảng 20 30% về nó, sau đó vô angular.io để học cho đàng hoàng, có tutorial và tài liệu giải thích khá rõ ràng. Chứ học kiểu này bug quài dễ nản ^^

Em cũng là học qua rồi bắt tay vào làm thử gặp bug thì đi hỏi mà bác . . .

Chưa coi qua sao biết route riếc gì dc bác . . . ^^