将字符串从 json 响应转换为数字 - *ngFor - Angular 6

Question

我正在尝试将一些字符串从 json 响应转换为数字。例如

邮政编码：“92998-3874”至 92998-3874。遇到了这个SO。但不要在失败的地方。然后我需要在我的视图中循环它，但在堆栈闪电战控制台中面临以下错误。

ERROR
Error: Cannot find a differ supporting object '[object Object]' of type 'Clementina DuBuque'. NgFor only supports binding to Iterables such as Arrays.
Unable to display error. Open your browser's console to view.

到目前为止：

export class AppComponent {
  name = 'Angular';
  private _userList = [];
  private _userListAddress:any = [];
  _sampleURL = 'https://jsonplaceholder.typicode.com/users';

  constructor(private _http: HttpClient) { }
  _loadData() {
    this._http.get<any[]>(this._sampleURL).subscribe(data => {
      this._userList = data;
      this._userListAddress = data[0].address.suite;
      console.log(this._userList);

      for (var _address in this._userList) {
       this._userListAddress = this._userList[_address];
        console.log('address', 
        parseInt(this._userListAddress.address.zipcode));

        /* 

        //below snippet is used to convert strings to num

        [].forEach.call(this._userList, function (a, b) {          
          [].forEach.call(Object.keys(a), function (c) {            
            if (!isNaN(this._userList[b][c]))             
              this._userList[b][c] = +this._userList[b][c];
          });
        });
        console.log(this._userList); */
      }
    }
    )
  }
}


<button (click)="_loadData()">Load data</button>

<div *ngFor="let list of _userList">
<ul>
<li>{{list.address.zipcode}}</li>
</ul>

<div *ngFor="let addresList of _userListAddress">
    <ul>
<li>{{addresList.address.zipcode}}</li>
</ul>
</div>
</div>

哪里做错了或建议更好的方法来实现这一点。 非常感谢。

Stack Blitz

Answer 1

如果我们在谈论这个问题：

ERROR
Error: Cannot find a differ supporting object '[object Object]' of type 'Clementina DuBuque'. NgFor only supports binding to Iterables such as Arrays.
Unable to display error. Open your browser's console to view.

就在这里：

for (var _address in this._userList) {

_address - 这里是一个用户对象，例如

"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
  "street": "Kulas Light",
  "suite": "Apt. 556",
  "city": "Gwenborough",
  "zipcode": "92998-3874",
  "geo": {
    "lat": "-37.3159",
    "lng": "81.1496"
  }
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
  "name": "Romaguera-Crona",
  "catchPhrase": "Multi-layered client-server neural-net",
  "bs": "harness real-time e-markets"
}

然后你试图从用户数组中获取用户对象，绕过用户对象作为键，这实际上是错误的。 this._userListAddress = this._userList[_address];

所以这不是对话问题，只需检查您的代码流程即可。

更新

只需替换特殊字符，然后解析：

// ES6
let stringNumber = '123456-123';
let convertedNumber = Number(stringNumber.replace('-',''));
console.log(convertedNumber);
// pure js
let anotherStringNumber = '123456-123';
let anotherConvertedNumber = parseInt(anotherStringNumber.replace('-',''));
console.log(anotherConvertedNumber);