Невозможно отобразить git идентификатор пользователя, подписчика, фотографию на странице Angular HTML

Question

Постановка задачи - я работаю с машинописью, и моя задача состоит в том, чтобы у меня был компонент с текстовым полем и кнопкой. в текстовом поле мне нужно указать имя пользователя git и нажать кнопку. По нажатию кнопки я хочу получить конкретные данные пользователя (идентификатор, подписчик, фотография) в текстовом поле.

Попробовал - я создал компонент и услугу, и со службой я могу нажать API и успешно получить данные об использовании в формате json, но меня беспокоит вопрос о том, как напечатать партулярный идентификатор, подписчик и фот в разных текстовых полях. для этого я сохранил этот вывод в массиве, но не смог напечатать в html.

component. html

Enter Username: <input type="text" [(ngModel)]="username" />
<button (click)="searchUserDetails()">Search User</button>>
</div>>
<div >
    <table>
        <tr>
            User ID:<input type="text" [value]= />
        </tr>>
        <tr>
            Followers:<input type="text" name="followers" />
        </tr>>
    </table>  
</div>>

component.ts

import { GituserdetailsService } from '../service/gituserdetails.service';
import { JsonPipe } from '@angular/common';


@Component({
  selector: 'app-userdetails',
  templateUrl: './userdetails.component.html',
  styleUrls: ['./userdetails.component.css']
})
export class UserdetailsComponent implements OnInit {
username:string ;
details:any=[];
  constructor(private GituserdetailsService:GituserdetailsService) { }

  ngOnInit(): void {

    //this.searchUserDetails();

  }
searchUserDetails() :void{
  this.details = [];
  this.GituserdetailsService.searchUser(this.username).subscribe((data: any[])=>{
    console.log(data);
    this.details = data;
  })  ;
  //console.log(this.username);
}
}

service.ts

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class GituserdetailsService {
   username:String;

  constructor(private http:HttpClient) { }

    searchUser(username:String) :Observable<any>
   {
     console.log(`http://api.github.com/users/`+username);
    return this.http.get(`http://api.github.com/users/`+username)

}

}

Answer 1

Возвращаемые данные не являются массивом, поэтому возьмите переменную типа any и сохраните свои выходные данные в этой переменной

См. Следующий код:

mydata : any; 

getUser(username) {
   this.http.get(`https://api.github.com/users/${username}`).subscribe((data)=>{
    this.mydata = data; 
    console.log(this.mydata); 
   }); 
}

Чтобы отобразить текстовые данные в HTML вы можете использовать код как показано ниже

<p> {{ this.mydata.login }} </p> 

Для отображения изображения в HTML вы можете использовать код как показано ниже

<img src="{{this.mydata.avatar_url}}" width="300">