отображение в машинописных и угловых 1

Question

Я программирую с угловым 1.6 и машинописным текстом. В моем проекте я должен загрузить список пользователей с сервера и отобразить список с флажками возле каждого человека:

<div class="container"> 
    <h2>Hello {{ $ctrl.name }}</h2> 
    <ul ng-repeat="user in $ctrl.users" class="list-group"> 
    <li class="list-group-item"> 
     <input type="checkbox" ng-model="user.selected"> 
     {{user.name}} 
    </li> 
    </ul> 
    <button class="btn btn-primary" ng-click="$ctrl.showSelected()">save</button> 
</div> 

После пользователь выбирает несколько человек и нажимает на кнопку ниже, он должен получить предупреждение со списком выбранных лиц ,

Вот Person объект, который приходит от сервера

export class Person { 
    public name:string; 
} 

И моя служба выглядит так:

getUsers() : ng.IHttpPromise<Person[]> { 
return this.$http.get('users.json').then((res:ng.IHttpPromiseCallbackArg<Person[]>)=>{ 
    return res.data 
}) 
} 

Поскольку в моем пользовательском интерфейсе элементы лица должны быть «выбраны» свойство - я думал о создайте класс uiPerson, который будет получен от Лица:

import { UsersService } from './service' 
import { Person } from './Person' 
    class uiPerson extends Person{ 
    public selected:false; 
} 
export const AppComponent = { 
    template: ` 
    <div class="container"> 
    <h2>Hello {{ $ctrl.name }}</h2> 
    <ul ng-repeat="user in $ctrl.users" class="list-group"> 
    <li class="list-group-item"> 
     <input type="checkbox" ng-model="user.selected"> 
     {{user.name}} 
    </li> 
    </ul> 
    <button class="btn btn-primary" ng- click="$ctrl.showSelected()">save</button> 
</div> 
`, 
controller: class AppComponent { 
static $inject =["usersService"] 
constructor(private usersService: UsersService) { } 

$onInit() { 
    this.name ='Users'; 
    this.usersService.getUsers().then(users=>{ 
    this.users= users as uiPerson[];//<-- HERE IS QUESTION 
    }) 
    } 
    showSelected() { 
    alert(this.users.filter(u=>u.selected).map(u=>u.name).join(',')) 
    } 
} 
}; 

Я новый с ти pescript - я прав насчет сопоставления с «this.users = users как синтаксис uiPerson []»? Есть ли еще более правильный способ сделать это?

здесь является plnkr

Благодаря

Answer 1

Это выглядит разумным мне. Я бы лично сделать пару корректировки:

• сделать интерфейсы Person и UiPerson вместо классов, если вы не планируете использовать их по-разному в будущем (например, построение их new)
• Рассмотрим делает ли это смысл для selected необязателен, так как сначала ваш массив объектов UiPerson не будет определен. Это также может позволить вам пропустить тип.

Здесь a revised plunkr с этими изменениями, и я также взял на себя смелость сделать его ближе к моему личному стилю, если вам нравится то, что вы видите.

Answer 2

Мой совет здесь заключается в том, чтобы не вводить класс uiPerson - это добавляет сложности и загрязняет вашу модель домена. Является ли «выбранным» поистине атрибутом Человека?

Что произойдет, если вам нужно представить одно и то же лицо - это два списка?

public selectedList1: boolean; 
public selectedList2: boolean; 

Вместо этого - я хотел бы посмотреть, чтобы сохранить 'выбранный' состояние в контроллере, подвергая простую функцию 'IsSelected':

controller: class AppComponent { 
    static $inject =["usersService"] 
    constructor(private usersService: UsersService) { } 

public selectedUsers: Person[] = []; 

$onInit() { 
    this.name ='Users'; 
    this.usersService.getUsers().then(users=>{ 
     this.users= users; <-- No uiPerson 
    }) 
} 

showSelected() { 
    alert(this.selectedUsers.map(u=>u.name).join(',')) 
} 

isSelected(person: Person): boolean { 
    return selectedUsers.indexOf(person) !== -1; 
} 

Шаблон:

<input type="checkbox" ng-checked="$ctrl.isSelected(user)"> 

Plnkr