Question

我想这是一个简单的问题，但是在这里我找不到合适的答案。我有一个来自API的名称列表以及所选功能的名称：名称变为红色（CSS），显示图像，有关人员的详细信息进入这些输入字段（也来自API）。但是，当我加载页面时，没有选择（当然），并且该页面使用户“毫不费力”。如何默认选择第一个？这是被选择时的样子（以及我希望它默认情况下的样子）：

这就像我现在拥有的一样：

HTML：

<div class="container">
  <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>

  <div class="row">
    <div class="col-md-3" *ngIf="people">
      <ul *ngFor="let star of people.results">
        <li (click)="onSelect(star)" [class.selected]="star === selectedPeople">{{star.name}}</li>
      </ul>
    </div>
    <hr>
    <div class="col-md-7" *ngIf="picture">
      <img class="img-fluid" [src]="getImageUrl(selectedPeople)">
    </div>
    <div class="col-md-2">
      <div class="row">
        <label>Height</label>
      </div>
      <div *ngIf="selectedPeople">
        <div class="row">
          <input class="form-control" [(ngModel)]="selectedPeople.height">
        </div>
      </div>
      <div class="row">
        <label>Hair</label>
      </div>
      <div *ngIf="selectedPeople">
        <div class="row">
          <input class="form-control" [(ngModel)]="selectedPeople.hair_color">
        </div>
      </div>
      <div class="row">
        <label>Mass</label>
      </div>
      <div *ngIf="selectedPeople">
        <div class="row">
          <input class="form-control" [(ngModel)]="selectedPeople.mass">
        </div>
      </div>
      <div class="row">
        <label>Eyes</label>
      </div>
      <div *ngIf="selectedPeople">
        <div class="row">
          <input class="form-control" [(ngModel)]="selectedPeople.eye_color">
        </div>
      </div>
    </div>
  </div>
</div>

TS：

people: People;
  selectedPeople: People;
  picture=false;
  loading = false;

  constructor(private starService: StarService) {
    this.getChars();

  }

  ngOnInit() {
  }

  getImageUrl(person) {
    return "../../assets/" + person.name + ".jpg";
  }


  onSelect(persona: People): void {
    this.selectedPeople = persona;
    this.picture=true;
  }


  getChars() {
    this.loading = true;
    this.starService.getChars().subscribe(data => {
      this.loading = false;
      this.people = data;
      console.log(this.people)
    });
  }



}

这是人员界面：

export interface People {
  birth_year: string;
  films:Films
  created: string;
  edited: string;
  eye_color: string;
  gender: string;
  hair_color: string;
  height: string;
  mass: string;
  name: string;
  skin_color: string;
  starships: Starships;
  url: string;
 }

Answer 1

您可以在订阅中调用onSelect方法，并将第一个元素传递给onSelect函数。

  getChars() {
this.loading = true;
this.starService.getChars().subscribe(data => {
  this.loading = false;
  this.people = data;
  this.onSelect( this.people.results[0]);
  console.log(this.people)
});

}

希望这会起作用。

使用ngOnit（）加载数据的更好方法是调用this.getChars（）;。在ngOnInit中，而不是在构造函数中。

Answer 2

似乎这里有一些数据键入问题。这样的事情怎么样：

  people: People[];             // This should be an array of people
  selectedPeople: People;       // This is just one person
  picture=false;
  loading = false;

  constructor(private starService: StarService) {
    // this.getChars();        // This should be in the onInit

  }

  ngOnInit() {
    this.getChars();
  }

  getImageUrl(person) {
    return "../../assets/" + person.name + ".jpg";
  }


  onSelect(persona: People): void {
    this.selectedPeople = persona;
    this.picture=true;
  }


  getChars() {
    this.loading = true;
    this.starService.getChars().subscribe(data => {
      this.loading = false;
      this.people = data.results;  // Seems that this should be the results
      this.onSelect(this.people[0]); // Then you can treat people as a simple array.
      console.log(this.people)
    });
  }

}

HTML也需要更改：

<ul *ngFor="let star of people">

现在这只是people而不是people.results，因为我们已经在getChars方法中提取了结果并将people属性设置为实际的人员列表。

如何使元素通过默认选择的API检索

2 个答案: