Góc 4 - sử dụng các đối tượng cho các giá trị tùy chọn trong một danh sách lựa chọn

Question

Tôi biết rằng các câu hỏi tương tự đã được hỏi, nhưng tôi không tìm thấy câu trả lời phù hợp. Tôi muốn tạo một danh sách lựa chọn trong một hình thức góc, trong đó giá trị cho mỗi tùy chọn là một đối tượng. Ngoài ra, tôi không muốn sử dụng 2 cách ràng buộc dữ liệu. ví dụ. nếu Component tôi có các lĩnh vực:

 

    lUsers: any[] = [ 
     { Name: 'Billy Williams', Gender: 'male' }, 
     { Name: 'Sally Ride', Gender: 'female'} 
     ]; 
    curUser: any; 

Tôi muốn mẫu HTML của tôi chứa này:

 

    <select #selectElem (change)="setNewUser(selectElem.value)"> 
     <option *ngFor="let user of lUsers" [ngValue]="user"> 
      {{user.Name}} 
     </option> 
    </select> 

Với mã này, tuy nhiên, setNewUser của tôi() chức năng nhận được các nội dung của Tên của người dùng được lựa chọn cánh đồng. Tại sao nó chọn lĩnh vực cụ thể, tôi không có ý tưởng. Những gì tôi mong đợi là nó sẽ nhận được "giá trị" của tùy chọn đã chọn, mà tôi đặt cụ thể cho một đối tượng người dùng.

Lưu ý rằng tôi đã sử dụng ngValue thay vì giá trị trong tùy chọn. Đó là do đề xuất của những người khác trên SO. Nếu tôi sử dụng giá trị thay vào đó, những gì xảy ra là đối tượng được chuyển đổi thành chuỗi '[Object object]', đó là những gì setNewUser() nhận được, đó là vô dụng.

FYI, tôi đang làm việc trên Windows 10, sử dụng góc 4.0.0 với @ góc/cli 1.1.2. Đây là setNewUser() phương pháp:

 

    setNewUser(user: User): void { 

    console.log(user); 
    this.curUser = user; 
    } // setNewUser() 

tôi xác định chỉ là những gì chính xác đã được truyền cho nó cả khai thác gỗ của tôi nó, và cũng có thể bao gồm này trên mẫu: <pre>{{curUser}}</pre>

Answer 1

Như value thuộc tính của option tag không thể lưu trữ toàn bộ đối tượng, chúng tôi sẽ tạo một thuộc tính mới id trong mảng lUsers để theo dõi mục đã chọn.

HTML:

<select #selectElem (change)="setNewUser(selectElem.value)"> 
    <option *ngFor="let user of lUsers" [value]="user.id"> 
     {{user.Name}} 
    </option> 
</select> 

này sẽ vượt qua độc đáo id để setNewUser chức năng của chúng tôi về sự thay đổi.

Trong component.ts của bạn:

... 

lUsers: any[] = [ 
    { id: 1, Name: 'Billy Williams', Gender: 'male' }, 
    { id: 2, Name: 'Sally Ride', Gender: 'female'} 
]; 
curUser: any = this.lUsers[0]; // first will be selected by default by browser 

... 

setNewUser(id: any): void { 
    console.log(id); 
    // Match the selected ID with the ID's in array 
    this.curUser = this.lUsers.filter(value => value.id === parseInt(id)); 
    console.log(this.curUser); 
} 

Đây là plnkr demo của đoạn mã trên. Mở công cụ nhà phát triển của bạn để xem nhật ký bảng điều khiển.

Answer 2

Bạn có thể sử dụng [ngValue] thay vì [value] trên -Elements. Nó phù hợp với tôi.

tôi đã tìm thấy thông tin ở đây: https://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/

Answer 3

Tôi hiện đang sử dụng [ngValue] và nó lưu đối tượng tốt.

Lời giải thích là tại sao bạn có kinh nghiệm vấn đề sử dụng (change) thay vì (ngModelChange) có thể được tìm thấy trong this question

Vì vậy, kể từ khi bạn đã sử dụng [ngValue], có thể bạn muốn làm một cái gì đó như thế này, nơi bạn chỉ sẽ sử dụng một cách ràng buộc để có thể sử dụng các chỉ thị ngModelChange:

<select (ngModelChange)="setNewUser($event)" (ngModel)="lUsers"> 
     <option *ngFor="let user of lUsers" [ngValue]="user"> 
      {{user.Name}} 
     </option> 
    </select> 

và tập tin ts của bạn sẽ nắm bắt được sự kiện này và nhận được đối tượng người dùng mà không cần phải theo dõi nó bằng cách id, về cơ bản tái sử dụng phương pháp cũ của bạn sẽ được tốt đủ:

setNewUser(user: User): void { 
    console.log(user); 
    this.curUser = user; 
    }