角度-找不到类型为“字符串”的其他支持对象“项One”。 NgFor仅支持绑定到数组等Iterables

时间:2020-02-27 12:48:35

标签: html angular typescript

关于StackOverflow的几个问题与此相似,但是找不到匹配的解决方案。

我的代码在尝试将项目提取到“选择”控件中时工作正常,如果项目计数大于1,我将获得成功的结果,但是如果返回的数据仅包含一项,我会得到一个控制台错误指向模板代码,然后说:

找不到类型为“字符串”的其他支持对象“项One”。 NgFor仅支持绑定到数组等Iterable。

这是我的HTML代码:

      <mat-select [formControl]="itemControl" required [(value)]="itemValue">
        <mat-option>--</mat-option>
        <mat-option *ngFor="let item of items" [value]="item">{{item}}</mat-option>
      </mat-select>

组件:

export class LoginWithDbComponent implements OnInit, OnDestroy {
  . . .
  items: string[] = [];
  itemValue: string;

  constructor(
    . . .
    public authService: AuthService,
  ) {

  }

  login(): void {
    this.authService.login(this.getUserLogin()).subscribe(
      next => {
        this.getUserItems();
      },
      error => {
      . . .
    );    
  }

  getUserItems() {
    this.items= this.authService.userItems;
    return this.items|| []; 
  }

服务:

    export class AuthService {
      userItems: any = [];
      . . .
      login(model: any) {
        return this.http.post(this.baseUrl + 'login', model).pipe(
          map((response: any) => {
            const user = response;
            if (user) {
              this.decodedToken = this.jwtHelper.decodeToken(user.token);
              this.userItems = this.decodedToken['items'];
              console.log(this.userItems);              <--- shows 'Item One'
            }
          })
        );
      }
      . . .
    }

那么在这种情况下应该怎么办?

1 个答案:

答案 0 :(得分:1)

似乎只有一个项目时,对“ post”调用的响应中的“ items”标记就不是数组。您可能需要检查this.decodedToken['items']是否为数组,如果不是,则将单个字符串添加到数组中。

let itemsToken = this.decodedToken['items'];
this.userItems = Array.isArray(itemsToken) ? itemsToken : [itemsToken];