单击按钮后，确保输入到表单中的值将显示在同一页面上

Question

我正在参加瑞士锦标赛项目，我必须参加锦标赛，在点击添加锦标赛按钮后，必须在同一页面上显示。

这是我添加锦标赛的代码：

<div class="container tourct">
 <div class="row">
  <div class="input-group" align="center">
    <form (ngSubmit) = "onCreateTournament(f)" #f="ngForm">
     <div class="col-lg-12 input-group col-md-offset-6">
     <input type="text" ngModel class="form-control" placeholder="Tournament Name" id="tourName" name="tname">
      <span class="input-group-btn">
       <button class="btn btn-secondary">Create Tournament </button>
       </span>
     </div>
  </form>
 </div>
</div>
 <div class="container tble">
    <div class="row">
      <app-display-tournaments></app-display-tournaments>
    </div>
  </div>
</div>

HTML的打字稿文件如下：

export class HomeComponent implements OnInit {

 tournaments:any = [

];

constructor(private tournamentService: TournamentService) { }

  ngOnInit() {
 }

  onCreateTournament(form: NgForm) {
   const tourName= form.value.tname;
   this.tournamentService.createTournament(tourName);
  }
}

此特定组件使用注入的服务。适用于此组件的代码如下：

@Injectable()
export class TournamentService implements OnInit{
    token: string = null;
    tournaments = [];

     constructor(private http: HttpClient,
               private router: Router,
                private authorizationService: AuthorizationService)
                {}

    ngOnInit(){
    }

createTournament(name: string){
    this.token = 'JWT ' + this.authorizationService.getToken();
    const body = {
        name
    }
    this.http.post('http://localhost:8000/tournament',
        {
            headers: new HttpHeaders().set('Authorization', this.token)
        })
       .subscribe(
         response => {}
    );
}

导入所有适当的模块。

发送到localhost：8000的帖子是这样的：

exports.createTournament = (req, res) => {
let user_id = req.user.id;
let name = req.body.name;

if(name.length > 0 && name.length<=50){
    tournament.create_tournament(user_id,name, function(result){
        res.json({
            "message": "Successfully created Tournament"
        });
    })
}
else{
    res.json({
        "message": "Tournament name should be between 1 to 50 charecters"
    })
   }
 }

我该如何处理，以便在输入锦标赛名称后，它会立即显示在同一页面上？