时间戳

首页 > 解决方案 > Spring Security 和 Angular 官方教程 Angular 部分无法编译

angular - Spring Security 和 Angular 官方教程 Angular 部分无法编译

问题描述

我一直在关注Spring Security and Angular 教程，但angular在此步骤之后无法编译：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Demo';
  greeting = {};
  constructor(private http: HttpClient) {
    http.get('resource').subscribe(data => this.greeting = data);
  }
}

我的IDE 抱怨id并content在unresolved variables

<div style="text-align:center"class="container">
  <h1>
    Welcome {{title}}!
  </h1>
  <div class="container">
    <p>Id: <span>{{greeting.id}}</span></p>
    <p>Message: <span>{{greeting.content}}!</span></p>
  </div>
</div>

本教程是否已经过时或者我可能做错了什么？

标签： angularspring

解决方案

您的 IDE 正在抱怨，因为greetings它是一个空对象。这很正常，因为它是一个空对象greeting = {};。

如果你想避免这个警告，你可以创建一个带有 optionnals 属性的对象：

class Data { 
    constructor(public id?:string, public content?:string){}
}

并在您的组件中使用它greeting: Data = {};

您还可以创建一个没有选项属性的对象：

class Data { 
    constructor(public id:string, public content:string){}
}

并在您的组件greeting: Data;和 HTML 使用中使用它

<p>Id: <span>{{greeting?.id}}</span></p>
<p>Message: <span>{{greeting?.content}}!</span></p>

您也可以使用，但如果您可以键入对象greeting: any;，我不建议您使用。any使用起来更加清晰。

或者只是为了教程而忽略警告/抑制警告。

推荐阅读