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

Question

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 以及我的服务层下拉列表单独不起作用。我不知道该怎么做？

Answer 1

我想发表评论，但我现在还做不到。嗯，我仔细阅读了你的代码，没有看到明显的错误，期待一个。

(click)="businesstype"

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

Answer 2

您可以使用 async，因为我们正在从 observable 获取数据。

 <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>

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

I able to get data from service layer But not visible in hTML page

angular

angularjs-directive

angular2-routing

angular2-services

angular2-directives