表单提交后以角向

Question

我目前正在建立游戏历史搜索网站。我想做的是，如果我单击历史记录组件html中的一个用户名，则会调用searchIt（）函数。在函数中，我使用单击的用户名设置输入值，然后使用setValue（）并调用onSubmit（）再次提交表单。我期望的是，在表单组件中，将发送新的获取请求，以获取所选用户名的新配置文件信息，并将该信息发送到历史记录组件以获取新的游戏历史记录。

这是一个表单组件html

 <div id = "start">
<form id = "searchform" [formGroup]="form" (ngSubmit)="onSubmit()">
    <div id = "searchbox">
        <input id = "search" formControlName="summonerName" (change) = "backToDefault()" autocomplete="off" placeholder=" Summoner Name..  ex)dragonsoup2" required/>  
        <button id = "submit" [disabled] = "submitted" type="submit">Search</button>
        <div id = "err1" class="alert alert-danger" *ngIf = "summonerName.invalid">Cannot be empty</div>
        <div id = "err2" class="alert alert-danger" *ngIf = "summonerName.valid"></div>
    </div>
        <app-summoner-history *ngIf = "checkObj(heroes)" [userinfo] = "heroes"></app-summoner-history> // if there is get response with no error then display history component html and send the get response to history component
</form>

这是形式的.service

 getdata(name: string): Observable<LOLUserData>{
 this.setURL(name);
 return this.http.get<LOLUserData>(this.apiurl, httpOptions).pipe(
 map(res => res),
 catchError(error => {return throwError(true);}));
 }

这是表格的.ts

import { Component, OnInit, Input, NgZone } from '@angular/core';
import { LOLUserData } from './lolinterface';
import { SummonerService } from './summoner.service';
import { debounceTime } from 'rxjs/operators';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import { Router } from '@angular/router';

    @Component({
  selector: 'app-summoner',
  templateUrl: './summoner.component.html',
  providers: [ SummonerService ],
  styleUrls: ['./summoner.component.css']
})
export class SummonerComponent implements OnInit{

  private typed : boolean = false;
  private heroes: LOLUserData;
  private url: string = 'http://ddragon.leagueoflegends.com/cdn/8.19.1/img/profileicon/';
  private profileimg: string = "";
  private notMatching: boolean = false;
  private errorMsg: string = "";
  public form: FormGroup;
  public summonerName: FormControl;
  private fromClick : boolean = false;
  private submitted: boolean = false;
  private wrong: boolean = false;
  constructor(private summonerService: SummonerService, private zone: NgZone) {  }

  ngOnInit(): void {
    this.summonerName = new FormControl('', Validators.required)
    this.form = new FormGroup({
      summonerName: this.summonerName
    });
  }

  getHeroes(name: string): void {
    this.summonerService.getdata(name)
    .subscribe(hero => 
        this.zone.run(() => {
        this.heroes = hero;
        this.heroes.profileimg = this.url + this.heroes.profileIconId + ".png";
        this.heroes.searchForm = this.form;
      }),
      (error => 
      {
        this.setErrValue(this.heroes)
        console.log(this.notMatching);
      }),
      () => console.log("done")
    )
  }
  setErrValue(ob: any){
    this.submitted = false;
    if(ob == null){
      let err2 = document.getElementById("err2");
      err2.style.display = "block";
      err2.innerHTML = "Cannot find the Summoner";
    }
  }

  onSubmit(){
    this.submitted = true;

    if(this.form.invalid){
      let err1 = document.getElementById("err1");
      if(err1 != null || err1.style.display == "none"){
        err1.style.display = "block";
      }
      this.submitted = false;
      return;
    }
    this.getHeroes(this.form.get("summonerName").value);//sending get request
  }

  backToDefault(){
    this.heroes = null;
  }

  checkObj(hrs: LOLUserData) : boolean{
    let input = document.getElementById("search");
    let start = document.getElementById("start");
    let error1 = document.getElementById("err1");
    let error2 = document.getElementById("err2");
    let logo = document.getElementById("textLogo");
    let html = document.getElementsByTagName("html")[0];

    if(hrs != null){
      this.submitted = false;

      this.form.get("summonerName").markAsPristine();
      this.form.get("summonerName").markAsUntouched();

      html.style.backgroundImage = "linear-gradient(to bottom, transparent 60%, #07131A), url('../../assets/Bilgewater.jpg')";
      html.style.backgroundColor = "#07131A";
      html.style.backgroundSize = "100% 100%";
      html.style.backgroundRepeat = "no-repeat";

      input.style.marginTop = "0";

      logo.style.display = "none";

      start.style.marginTop = "0";
      start.style.paddingTop = "0";
      start.style.border = "none";
      start.style.borderRadius = "0";
      //start.style.borderBottom = "2px solid #D4D9FF";
      //start.style.boxShadow = "0 1px #9AA2E3";

      if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        start.style.height= "60px"
      }
      else{
        start.style.height= "90px"
      }

      if(error1 != null){
        error1.style.display="none";
      }
      if(error2 != null){
        error2.style.display="none";
      }

      return true;
    }
    return false;
  }
}

这是历史记录组件ts文件的一部分。 @input是来自表单组件（配置文件信息）的值，使用它，历史记录组件中还有另一个get请求。

    @Input('userinfo') private info: LOLUserData; 

  constructor(private summonerComponent: SummonerComponent, private summonerHistoryService: SummonerHistoryService, private summonerOneGameHistoryService: SummonerOnegameHistoryService) {}

  ngOnInit(){
    if(this.info != null){
        console.log("not null = " + this.info);
        this.findHistory();
    }
  } 

这是获取所有get响应后的history组件html的一部分。

<div class = "forone">
    <div class = "accountforone" >
    <p (click) = "searchIt("username")">username</p>
</div>

这是（点击）功能

searchIt(accid: string){
    this.summonerComponent.form.get("summonerName").setValue(accid);
    this.summonerComponent.onSubmit();
}

如果我键入新的用户名，然后按Enter或单击“提交”按钮再次提交表单，则历史html中的游戏历史记录会随着新的用户名的新历史记录而发生变化。如果使用上述技术，则可以检查是否收到了新的配置文件信息，但是以前的游戏历史记录仍保留在历史记录组件中（ngOnInit（）甚至没有被调用）。我试图从searchIt函数手动调用ngOnInit（），但是它什么都没有改变，但是显示错误消息，提示未定义用于保存图像的变量。

请从这个问题中救出我。