我能够从服务层获取数据但在 hTML 页面中不可见答案

【问题标题】：I able to get data from service layer But not visible in hTML page我能够从服务层获取数据但在 hTML 页面中不可见
【发布时间】：2018-10-03 04:48:20
【问题描述】：

Component.ts

export class NewExpenseComponent {
   users: any[];
  toastConfig: ToasterConfig; 
  constructor(private route: ActivatedRoute,
    private router: Router,
    private service: ExpensesService,
    private http: HttpClient,
    private notificationService: NotificationService,
    private toasterService: ToasterService
  ) {
    this.service.get_bussiness().subscribe(users => this.users = users,
      error => console.log(error));
  }  
}

Service.ts.

get_bussiness(): Observable<any[]> {
    return this.http.get('http://localhost:8000/payment/')
      .map(response => response)
      .catch(error => Observable.throw(error.statusText));
  };

HTML

<div class="form-group">
        <label for="inputBusinessType">Business Type</label>
        <select #businesstype class="form-control" id="business_type" required [(ngModel)]="model.business_type" name="business_type" #Type="ngModel">
            <option disabled>Select</option>
            <option (click)="businesstype" *ngFor="let user of users" [value]="user.id">{{user.pay_method}}</option>
        </select>
        <div *ngIf="Type.errors && (Type.dirty || Type.touched)" class="errors">
            <div [hidden]="!Type.errors.required" style="color:red;">
                * Please select One
            </div>

        </div>
</div>

在控制台中我可以看到数据，但我无法在 Html 页面中获取该数据

console.log

 (3) [{…}, {…}, {…}]
    0
    :
    {id: 1, pay_method: "fuel"}
    1
    :
    {id: 2, pay_method: "card"}
    2
    :
    {id: 3, pay_method: "cash"}
    length
    :
    3
    __proto__
    :
    Array(0)

在这里，我提到了我的 Html、component.ts 以及我的服务层下拉列表单独不起作用。我不知道该怎么做？

【问题讨论】：

您的控制台有错误吗？
它会抛出类似 Type Error: connot read property 'choose_payee' undefined 和 Error Context 的错误。但这是另一个输入，除了没有错误。
choose_payee 您的代码中没有。什么是choose_payee？
Choose_payee 是另一个输入框

标签： angular angularjs-directive angular2-routing angular2-services angular2-directives

【解决方案1】：

我想发送评论，但我还不能这样做。好吧，我仔细阅读了您的代码，没有发现明显的错误，期待一个。

(click)="businesstype"

这是什么意思？它只是必须包含表单对象的本地模板变量。你确定控制台没有错误吗？我们必须有更多关于问题的信息才能解决它。

【讨论】：

对不起，我忘记删除它，但如果我也删除它就无法正常工作。
无论如何，告诉我请登录您的控制台。可能你有一些错误？ *ngFor 循环应该可以正常工作。

【解决方案2】：

当我们从 observable 获取数据时，您可以使用 async。

 <select #businesstype class="form-control" id="business_type" required [(ngModel)]="model.business_type" name="business_type" #Type="ngModel">
            <option disabled>Select</option>
            <option *ngFor="let user of users|async" [value]="user.id">{{user.pay_method}}</option>
        </select>

【讨论】：