Question

我用angular 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
 })
}

因为在我的ui中，person元素必须具有“selected”属性 - 我正在考虑创建将派生自Person的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(','))
   }
}
 };

我是打字稿的新手 - 我是否正确使用“this.users = users as uiPerson []”语法进行映射？有没有更正确的方法呢？

这是plnkr

由于

Answer 1

这对我来说很合理。我个人会做一些调整：

创建Person和UiPerson接口而不是类，除非您计划将来以不同的方式使用它们（例如使用new构建它们）
考虑selected是否有意义是可选的，因为首先你的UiPerson对象数组不会定义它。这也可以让你跳过类型转换。

这里有a revised plunkr这些变化，我也冒昧地让它更接近我的个人风格，以防你喜欢你所看到的。

Answer 2

我的建议是避免引入uiPerson类 - 这会增加复杂性并污染您的域模型。 “被选中”真的是一个人的属性吗？

如果你被要求出示同一个人，会发生什么？两个名单？

public selectedList1: boolean;
public selectedList2: boolean;

相反 - 我会在Controller中存储'selected'状态，暴露一个简单的'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

在typescript和angular1中映射

2 个答案: