Question

（编辑：纠正错误的括号）（编辑：更改了HTML代码以使用*ngFor）

我是Angular和MEAN堆栈的新手（并且正在努力），所以请耐心等待。我在显示我在HTML <select>.

中从MongoDB获取的数据时遇到问题

我的服务：

getLacadorByClubeId(idClube){
     let headers = new Headers();
     headers.append('Content-Type','application/json');
     let ep = this.authService.prepEndpoint('lacador/listByClubeId');

     //important: returning the res with a Map. Maybe the problem is here?
     return this.http.get(ep,{headers: headers, params: {idClube: idClube}})
       .map(res => res.json());
   }

我的组件：

ngOnInit() {
  this.clubesdelacoService.getClubesdelaco().subscribe((clubesdelaco) => {
      this.Clubedelaco = clubesdelaco;
      console.log(clubesdelaco);
};

我的HTML：

        <div *ngIf="!isView" class="controls col-md-8 ">
            <select name="clube"  id="repeatSelect" class="input-md form-control" style="margin-bottom: 10px;">
                    <option *ngFor="let clube of this.Clubedelaco" [ngValue]="clube._id">{{clube.name}}</option>
                </select>
                <option ng-repeat="clube in this.Clubedelaco" value="{{clube._id}}">{{clube.name}}</option>
            </select>
         </div>

这导致浏览器控制台上的消息：

Image of Browser console, please note that the data seems to be inside an object

组合框中没有显示任何内容：（

所以，我的观点支持接收数据，但我没有显示。我的问题是，问题是什么？错误地使用了<select>？需要将对象转换为数组？如果是这样，怎么样？

Answer 1

要填充<select>，您可以使用*ngFor。 Angular 2+中没有ng-options或ng-repeat。您可以使用[ngValue]="someExpression"将每个value的{{1}}属性设置为<option>数据对象上的给定属性，在您的情况下，它看起来像clube 1}}属性。

这假设_id是一个对象数组。

Clubedelaco

这是example的实际操作。它已设置为在<div *ngIf="someCondition"> <select name="clube"> <option *ngFor="let clube of Clubedelaco.clubesdelacolist" [ngValue]="clube._id">{{clube.name}}</option> </select> </div>生命周期钩子中演示/模拟异步设置Clubedelaco。

要将数据绑定为表单的一部分，您需要使用Template Driven Forms或Reactive Forms。

为避免使用嵌套对象，您可以使用RxJS ngOnInit()运算符来转换http get调用的结果。例如，您可以返回内部数组。它看起来像这样：

map()

然后在你的组件中：

import { Observable } from 'rxjs/Observable';

// instead of any, you'd ideally want to make a class/interface to represent the clube object
getLacadorByClubeId(idClube): Observable<any[]> {
  // setting headers as before

  return this.http.get(ep,{headers: headers, params: {idClube: idClube}})
    .map(res => res.json())
    // additional map() chained on
    // emit the clubesdelacolist array value instead of original object
    // you can do more formatting/projection here if needed
    .map(res => res['clubesdelacolist']) as Observable<any[]>;
}

这将允许您在HTML中执行以下操作：

@Component({})
export class SomeComponent {
  // create a class or interface to represent the clube objects and their properties
  Clubedelaco: any[];

  ngOnInit() {
    this.clubesdelacoService.getClubesdelaco()
      // clubesdelaco comes in as an array now
      .subscribe((clubesdelaco) => {
        this.Clubedelaco = clubesdelaco;
        console.log(clubesdelaco);
      };
}

希望这有帮助！

MEAN / Angular 4：无法在选择

1 个答案: