Cách cập nhật chế độ xem sau khi thay đổi mô hình trong Angular

Question

Làm cách nào để cho phép Angular truyền các thay đổi mà tôi đã thực hiện cho mô hình. Trong AngularJS điều này sẽ thực sự dễ dàng, nhưng tôi dường như không thể làm cho nó hoạt động trong Angular. Tôi biết toàn bộ hệ thống phát hiện thay đổi và xem truyền bá được thay đổi hoàn toàn. Bằng cách nào đó, tôi cần phải thông báo góc cạnh của những thay đổi. Nhưng làm thế nào tôi có thể làm điều này trong thực tế.

Xem đoạn mã này nguyên cảo:

import {Component, View, bootstrap, For} from 'angular2/angular2'; 

// Annotation section 
@Component({ 
    selector: 'app' 
}) 
@View({ 
    template: ` 
    <div *for="#user of users"> 
     {{user}} 
    </div> 
    `, 
    directives: [For] 
}) 
class App { 
    users:Array<String>; 

    constructor() { 
     this.users = []; 
     this.fillUsersAsync(); 
    } 

    fillUsersAsync(){ 
     window['fetch']('http://jsonplaceholder.typicode.com/users') 
      .then(resp => resp.json()) 
      .then(users => users.forEach(user => this.users.push(user.name))) 
      .then(() => console.log('Retrieved users and put on the model: ', this.users)); 
    } 
} 

bootstrap(App); 

Bạn sẽ thấy rằng, sau khi người sử dụng có được nạp vào mô hình, quan điểm không cập nhật.

Tôi đang sử dụng systemjs 0.16, angular 2.0.0-alpha.23.

See this plnkr for the example (hiện tại, chỉ hoạt động trong chrome, như mới 'lấy' api được sử dụng)

Answer 1

tôi thấy vấn đề này. Rõ ràng, một lỗi của nó sẽ được sửa trong alpha 27. Xem báo cáo lỗi này: https://github.com/angular/angular/issues/1913

Angular2 sử dụng zonej để biết khi nào bắt đầu chu trình tiêu hóa (kiểm tra bẩn và cập nhật chế độ xem). Hiện tại, zonejs không được kích hoạt sau khi tìm nạp dữ liệu bằng window.fetch() mới.

Thay thế cửa sổ [ 'lấy'] dòng này khắc phục sự cố cho tôi: Zone.bindPromiseFn(window['fetch'])('http://jsonplaceholder.typicode.com/users')

Answer 2

Để cập nhật dữ liệu vào xem trong AngularJS2 bạn nên sử dụng hình thức . Bạn có thể đọc về điều này tại số page này hoặc xem thêm chi tiết here. Nếu tôi hiểu hình thức một cách chính xác, bạn nên sửa đổi yout @View phần như thế này:

@View({ 
    template: ` 
    <div *for="#user of users" control="users"> 
     {{user}} 
    </div> 
    `, 
    directives: [For] 
}) 

--edited

Hãy thử điều này:

import {Component, View, bootstrap, For} from 'angular2/angular2'; 

// Annotation section 
@Component({ 
    selector: 'app' 
}) 
@View({ 
    template: ` 
    <div [control]="users" *for="#user of users"> 
     {{user.value}} 
    </div> 
    `, 
    directives: [For, forms] 
}) 
class App { 
    users:Array<String>; 

    constructor() { 
     this.users = new Control([]); 
     this.fillUsersAsync(); 
    } 

    fillUsersAsync(){ 
     window['fetch']('http://jsonplaceholder.typicode.com/users') 
      .then(resp => resp.json()) 
      .then(users => 
       var usersArr = [] 
       users.forEach(user => 
         usersArr.push(user.name)) 
       this.users = new Control(usersArr)); 
     } 
} 

bootstrap(App); 

Tôi không chắc chắn rằng câu trả lời của tôi là hoàn toàn chính xác, nhưng tôi không thể tìm thêm thông tin. Thử nghiệm với mã này và có thể là Force với bạn! :)

Tôi cũng tìm thấy this link, rất thông tin.

Như tôi hiểu, khi xây dựng, bạn nên khởi tạo users biến qua new Control(some data) và sau đó, trong mẫu xem bạn có thể truy cập vào dữ liệu này như thế này - {{users.value}}.

Nếu nó không hoạt động: hãy thử tương tự nhưng với dữ liệu rất đơn giản, ví dụ: sử dụng chuỗi thay vì một mảng.

Và this video sẽ giúp xóa biểu mẫu trong ng2.

Answer 3

Ng tiền tố quay lại. For hiện đã trở thành ngFor cho phiên bản Angular2 alpha-24 +.

import {NgFor} from 'angular2/directives'; 
@View({ 
    directives: [ngFor] 
}) 

Sau đó, sử dụng *ng-for=#user of users" trong mẫu.

Thanh toán các ngFor docs hoặc a working example

Answer 4

Chỉ cần trả lời nó ở đây Angular2 View Not Changing After Data Is Updated

Về cơ bản, có một lỗi trong Beta 2.0.0-beta. 1.

Hy vọng điều đó sẽ hữu ích!