Question

我跟随this tutorial。在从api.github获取用户列表的途中我得到错误：

无法找到不同的支持对象'[object Object]'

我认为它与

有关

 <ul>
 <li *ngFor = "#user of users">
 {{user | json}}
 </li>
 </ul>

在我的代码中，因为在它之前没有任何错误，并且我不确定数据是否来自get请求，只是单击didnt没有给出任何错误，这是我的代码到目前为止

@Component({
selector: 'router',
pipes : [],

template: `
<div>
<form [ngFormModel] = "searchform">
      <input type = 'text' [ngFormControl]= 'input1'/>
</form>
     <button (click) = "getusers()">Submit</button>
</div>
<div>
<ul>
    <li *ngFor = "#user of users">
    {{user | json}}
    </li>
</ul>
</div>
<router-outlet></router-outlet>
`,
directives: [FORM_DIRECTIVES]
})
export class router {
searchform: ControlGroup;
users: Array<Object>[];
input1: AbstractControl;

constructor(public http: Http, fb: FormBuilder) {
    this.searchform = fb.group({
        'input1': ['']
    })
    this.input1 = this.searchform.controls['input1']
}
getusers() {
    this.http.get(`https://api.github.com/
search/users?q=${this.input1.value}`)
        .map(response => response.json())
        .subscribe(
        data => this.users = data,
        error => console.log(error)
        )
}
}
bootstrap(router, [HTTP_PROVIDERS])

Answer 1

我认为您在响应有效负载中收到的对象不是数组。也许您要迭代的数组包含在属性中。您应该检查收到的数据的结构......

你可以尝试类似的东西：

@IBAction func tapMe(sender: UIButton) {
    print("I'm tapped")
    sender.backgroundColor = UIColor.greenColor()
}

修改

遵循Github文档（developer.github.com/v3/search/#search-users），响应的格式为：

public class func blackColor() -> UIColor // 0.0 white public class func darkGrayColor() -> UIColor // 0.333 white public class func lightGrayColor() -> UIColor // 0.667 white public class func whiteColor() -> UIColor // 1.0 white public class func grayColor() -> UIColor // 0.5 white public class func redColor() -> UIColor // 1.0, 0.0, 0.0 RGB public class func greenColor() -> UIColor // 0.0, 1.0, 0.0 RGB public class func blueColor() -> UIColor // 0.0, 0.0, 1.0 RGB public class func cyanColor() -> UIColor // 0.0, 1.0, 1.0 RGB public class func yellowColor() -> UIColor // 1.0, 1.0, 0.0 RGB public class func magentaColor() -> UIColor // 1.0, 0.0, 1.0 RGB public class func orangeColor() -> UIColor // 1.0, 0.5, 0.0 RGB public class func purpleColor() -> UIColor // 0.5, 0.0, 0.5 RGB public class func brownColor() -> UIColor // 0.6, 0.4, 0.2 RGB

因此，用户列表包含在getusers() { this.http.get(`https://api.github.com/search/users?q=${this.input1.value}`) .map(response => response.json().items) // <------ .subscribe( data => this.users = data, error => console.log(error) ); }字段中，您应该使用它：

{ "total_count": 12, "incomplete_results": false, "items": [ { "login": "mojombo", "id": 1, (...) "type": "User", "score": 105.47857 } ] }

Answer 2

我在代码中收到此错误，因为我没有运行 JSON.parse（结果）。

所以我的结果是一个字符串而不是一个对象数组。

即。我得到了：

"[{},{}]"

而不是：

[{},{}]

import { Storage } from '@ionic/storage';
...
private static readonly SERVER = 'server';
...
getStorage(): Promise {
  return this.storage.get(LoginService.SERVER);
}
...
this.getStorage()
  .then((value) => {
     let servers: Server[] = JSON.parse(value) as Server[];
                   }
  );

Answer 3

输入属性周围缺少方括号可能会导致此错误。例如：

Component Foo {
    @Input()
    bars: BarType[];
}

正确：

<app-foo [bars]="smth"></app-foo>

不正确（触发错误）：

<app-foo bars="smth"></app-foo>

Answer 4

此荒谬的错误消息仅表示存在对不存在的数组的绑定。

<option
  *ngFor="let option of setting.options"
  [value]="option"
  >{{ option }}
</option>

在上面的示例中，setting.options的值未定义。要解决此问题，请按F12键并打开开发人员窗口。当get请求返回数据时，查找包含数据的值。

如果存在数据，请确保绑定名称正确

//was the property name correct? 
setting.properNamedOptions

如果数据存在，它是数组吗？

如果数据不存在，则将其修复在后端。

Answer 5

让我不只一次的原因是页面上还有另一个同名变量。

例如在下面的示例中，NgFor的数据位于变量requests中。但是还有一个名为#requests的变量用于if-else

<ng-template #requests>
  <div class="pending-requests">
    <div class="request-list" *ngFor="let request of requests">
      <span>{{ request.clientName }}</span>
    </div>
  </div>
</ng-template>

Answer 6

说明： 您可以在数组上使用* ngFor。您已将用户声明为数组。但是，Get的响应将为您返回一个对象。您不能对对象执行ngFor。您应该有一个数组。您可以将对象显式转换为数组，这将解决问题。 数据到[数据]

解决方案

getusers() {
    this.http.get(`https://api.github.com/
search/users?q=${this.input1.value}`)
        .map(response => response.json())
        .subscribe(
        data => this.users = [data], //Cast your object to array. that will do it.
        error => console.log(error)
        )

Answer 7

如果这是HTML中返回的Observable，只需添加异步管道

    observable | async

Answer 8

如果您没有数组，但是您尝试将可观察对象像数组一样使用，即使它是对象流，也无法在本地运行。我在下面显示了解决方法。

如果您尝试使用来源类型为BehaviorSubject的可观察对象，请将其更改为ReplaySubject，然后在组件中按如下所示进行订阅：

组件

<Grid>
    <ItemsControl x:Name="myListView" Margin="0,0,0,0" >
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="FrameworkElement.Margin" Value="5"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid DataContext="{Binding RelativeSource={RelativeSource Self}}" Rows="{Binding Path=Rows, Mode=TwoWay}" Columns="{Binding Path=Columns, Mode=TwoWay}"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <local:GalleryButton></local:GalleryButton>

            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.Template>
            <ControlTemplate >
                <Border x:Name="Border"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer Margin="0"
                                  Focusable="False"
                                  Padding="{TemplateBinding Padding}"
                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                  CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}">
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </ScrollViewer>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="Blue" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="Silver" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ItemsControl.Template>
    </ItemsControl>
</Grid>

HTML

public partial class ModelGallery : UserControl
{
    public int Rows { get; set; }
    public int Columns { get; set; }

    public ModelGallery()
    {
        InitializeComponent();
        DataContext = this;
        myListView.Items.Clear();
    }

    public void setModelList(List<GalleryButton> llista)
    {
        Columns = 5;
        Rows = llista.Count / Columns;
        myListView.ItemsSource = llista;
    }
}

Angular：找不到支持对象'[object Object]'

8 个答案:

组件

HTML