来自服务的响应不会显示在 Angular 应用程序上，但会显示在 console.log 中

Question

所以我使用 angular 调用服务，它的目的是在 angular 应用程序上显示响应，但它没有显示，它只返回一个空白屏幕。

我在控制台日志中看到了来自服务的响应，但它没有显示在应用程序上

下面是component.ts文件

 import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import { FormService } from '../_services/form.service';
    import { Router } from '@angular/router';
    import { AuthService } from '../_services/auth.service';
    import { HttpClient } from '@angular/common/http';
    import { User } from '../_class.ts/userinfo';
    
    import { Message } from '../_class.ts/message';
    
    
    @Component({
      selector: 'app-appusers',
      templateUrl: './appusers.component.html',
      styleUrls: ['./appusers.component.css']
    })
    export class AppusersComponent implements OnInit {
    
      channel: any = {};
      roles: FormGroup;
      Role: {};
      user: User;
      res: Message;
      Response
    
      url30 = 'http://172.20.236.28:7840/get/role';
      url46 = 'http://172.20.236.28:7840/user/update'; 
    
    
      submitted = false;
    
    
    
      constructor(private fb: FormBuilder, private ds: FormService, private aus:AuthService, private http: HttpClient) {
      }
    
      getRoles() {
        return this.http.get(this.url30, this.Role);
      }
    
      get role_id() {
        return this.roles.get('role_id');
      }
    
      changeRole(e) {
        this.role_id.setValue(e.target.value)
      }
    
      // changeUser(e){
      //   this.user.setValue(e.target.value)
      // }
      
      assignRole(role_id, username, auth_by) {
        this.ds.assignRole(role_id, username, auth_by);
      }
    
     
    
      onSubmit() {
        //console.log(this.roles.value)
        this.submitted = true;
        if (!this.roles.valid) {
          return false;
        }else {
          this.http.post(this.url46, this.roles.value)
          .subscribe((response: any) => {
            this.res = response
            this.Response = this.res.message
            console.log(response) 
            // this.Response = this.res.message
             
          // console.log( this.res.message)
          }  )
        }
      }
    
      ngOnInit() {
        this.roles = this.fb.group({
          role_id: [''],
          username: [''],
          auth_by: ['']
        });
        this.getRoles().subscribe(
          data => {this.Role = data
        //  console.log(this.Role)
        }
        );
    
        
      }
    
      }

下面是html文件

<div class="col">

     <br><br/>
        <div  class="container col-sm-5 align-center" *ngIf="!submitted">
            <div class="card">
            <div class="card-header text-center text-white">
            Assign User Role
            </div>
                <form class="container-fluid" [formGroup]="roles" (ngSubmit)=onSubmit()  >
                    <div class="form-group">
                        <label>Username</label>
                        <input formControlName="username" #username type="text" placeHolder="Username" class="form-control" />
                    </div>

                    <div class="form-group"> 
                        <label class="">Assign Role</label>
                        <select class="form-control" (change)="changeRole($event)" placeHolder="Choose a Role" formControlName="role_id" >
                            <!-- <option value="">Choose a Role</option> -->
                            <option *ngFor="let role of Role" value="{{role.role_id}}">{{role.role_id}}</option>
                        </select>
                    </div> 

                    <div class="form-group">
                        <input formControlName="auth_by" #auth_by type="hidden" placeHolder="" class="form-control" />
                    </div>
                    
                 <button mat-raised-button [disabled]="" class=" btn-sm btn-block text-white" type="submit">Update</button> 

                    <!-- <button (click)="assignRole(role_id, username, auth_by)" class="btn btn-danger" style="text-align: center" type="submit">Save</button> -->
                      
                    
                    <br><br/>   
                    
                    <div class="alert alert-info text-center" *ngIf="Response">
                        <h3 class="text-center">
                            {{Response}}
                        </h3>
                    </div>
                </form>
            </div>
        </div>

下面是service.ts

assignRole(role_id, username, auth_by) {
    const obj = {
      role_id: role_id,
      username: username,
      auth_by: auth_by
    };
    //console.log(obj);
     this.http.post(this.url9, obj)
     .subscribe((response)=> this.Response = JSON.stringify(response))
     //console.log(this.Response)
  }