在角度/打字稿中将类创建为可迭代答案

【问题标题】：creating class as Iterable in angular/typescript在角度/打字稿中将类创建为可迭代
【发布时间】：2019-01-30 21:30:18
【问题描述】：

我已经在 Angular 中创建了一个类，现在当我通过商店订阅获取对象时，虽然它返回一个对象数组，但我不能在返回的对象上使用 forEach 循环。

是的，我使用了 Object.keys(user).forEach(){..} 它正在工作，但我想通过使类 Iterable 来做同样的事情。如何做到这一点。

示例代码：-

class user {
    ...
}
ngOnInit(){
    storeSubsc = this.store.select('users').subscribe(user => {
        this.user = user;
    });
}

login(){
    Object.keys(this.user).forEach()... --> working fine
    I want it like
    this.user.forEach() {... }
}

在此先感谢...

【问题讨论】：

如果我错了，请纠正我，您希望实现的是 this.user 的键的可迭代，而不是使用 Object.keys()？
是的..，类似this.user.forEach(ele => { console.log(ele): }

标签： angular typescript iterable

【解决方案1】：

为了让你的类是可迭代的，你的类需要有一个Symbol.iterator的方法：

class User implements Iterable<string> {
    // ...
    constructor(private username: string, private password: string) { }

    *[Symbol.iterator](): Iterator<string> {
        for (let key of Object.keys(this)) {
            yield key;
        }
    }
}

const u = new User('blabla', '1234');
for (let k of u) {
    console.log(k);
}

在这种情况下，我使用了生成器函数。

【讨论】：

（注意浏览器支持，IE不知道）

【解决方案2】：

您可以使用for in 运算符：

class User {
  // 
}

const user = new User(/*args*/); 
for (let prop in user) {
  console.log(prop, user[prop]);
}

此外，您可以检查类实例在for in 循环内是否具有prop 作为其自己的属性user.hasOwnProperty(prop)。例如，如果您的User 类扩展了另一个基类并且没有检查hasOwnProperty，您也会看到constructor：

class BaseUser {
  constructor(public x, public y) { }
}

class User extends BaseUser {
  constructor(public a, public b, public x, public y) {
    super(x, y);
  }
}

const user = new User('12', 2, 111, 222); 
for (let prop in user) {
  alert(prop);
}

您将看到五个警报：x, y, a, b, constructor。

【讨论】：