Angular无法以HTML打印JSON数据？

Question

我想从API提取数据并在HTML页面上打印相同的数据。

我有如下代码。我能够从API提取数据并在控制台上记录API数据。但是我无法在HTML页面上打印相同的内容。

在编译或执行代码时没有显示任何错误，我认为代码缺少某些东西。到目前为止，我看不到任何错误，请帮助我解决这个问题在下面给出component.ts，HTML，Service.ts]

componenet.ts

export class LoginComponent implements OnInit {

username='';
password='';
a='';
data1=[];
  constructor(private abc:LoginService, private router:Router) { }

  ngOnInit() {
  }

  login()
  {

       console.log(JSON.stringify({username:this.username,password:this.password}));
      this.a=JSON.stringify({username:this.username,password:this.password});  

      this.abc.getValues(this.a).subscribe((data:any)
      =>{
         this.data=data;
         console.log(data);
         console.log(this.data1);
      });

  }

}

HTML

<div class="wrapper fadeInDown">
  <div id="formContent">
    <!-- Tabs Titles -->

    <!-- Icon -->
    <div class="fadeIn first">
      <h1>Touchworld Technologies</h1>
    </div>

    <!-- Login Form -->
    <form #formData = "ngForm">

        <input type="text" id="login" class="fadeIn second" placeholder="username" name="username" [(ngModel)]="username">
        <input type="text" id="password" class="fadeIn third" name="password" placeholder="password" [(ngModel)]="password">
        <input type="submit" class="fadeIn fourth" value="Log In" (click)="login()">

        <!-- <button class="fadeIn fourth" [routerLink]="['../secondpage']">Home</button> -->
    </form>
    {{data1}}
    <!-- Remind Passowrd -->
    <div id="formFooter">
      <a class="underlineHover" href="#">Go to the Site</a>
    </div>

  </div>

</div>
<ul>
    <li *ngFor="let datas of data1">
       <span>{{datas.id}}</span>
       <span>{{datas.title}}</span>
       <span>Test</span>

    </li>
  </ul>

Service.ts

export class LoginService {

    constructor(private http:HttpClient){}

  getValues(a:any){
    console.log("you have entered");
  console.log(a);
   return this.http.get('https://jsonplaceholder.typicode.com/posts');

  }

}

Answer 1

this.abc.getValues(this.a)
   .subscribe((data:any) => {
         //this.data=data; // Error is here
         this.data1 = data; // Comment the above line and add this line
         console.log(data);
         console.log(this.data1);
   });