搜索到
625
篇与
的结果
-
删除Mac启动台的Steam游戏图标 在Mac上安装Steam游戏后，会发现启动台（Launchpad）上会有相关的Steam游戏图标，然而，当我们把这个Steam游戏卸载后，却发现启动台（Launchpad）上的图标依然存在，那么，如何将这个图标删除呢？ 方法很简单，打开访达（Finder），前往 - 前往文件夹（或快捷键Shift+Command+G），输入路径：/Users/你的用户名/Applications，打开应用程序文件夹（Applications），选中里面的Steam游戏，点击右键，将图标移到废纸篓即可。 Steam平台给Mac用户带来了很多优秀好玩的游戏，很多的游戏在Mac上有不俗的表现，但是，Mac比较适合玩小游戏，不太适合玩大型游戏，大型游戏还是建议使用PS4或者PC来玩更好一些。 -
Mac 安装Xmind 破解版教程 官网下载最新的安装包我这里下载的是XMind8，切记不要从App Store下载，App Store下载的无法激活。XMind官网下载破解包 XMindCrack.jar链接: https://pan.baidu.com/s/1jqpodMvKQTNQyenAIy0Y3w 密码: rzxq链接:https://pan.baidu.com/s/1to4gjwJ1LRa_SuCQ50fqzw 密码:a7pg安装成功后，查看xmind.app包内容打开包之后，Contents/Eclipse/将XMindCrack.jar放在这个包里面。修改XMind.ini文件，在后面添加-javaagent:/Applications/XMind.app/Contents/Eclipse/XMindCrack.jar打开xmind输入邮箱和序列号邮箱：随便填写序列号：XAka34A2rVRYJ4XBIU35UZMUEEF64CMMIYZCK2FZZUQNODEKUHGJLFMSLI QMQUCUBXRENLK6NZL37JXP4PZXQFILMQ2RG5R7G4QNDO3PSOEUBOCDRYSSXZGR ARV6MGA33TN2AMUBHEL4FXMWYTTJDEINJXUAV4BAYKBDCZQWVF3LWYXSDCXY5 46U3NBGOI3ZPAP2SO3CSQFNB7VVIY123456789012345
-
Spring PostConstruct注解的使用 一、基本介绍@PostConstruct该注解被用来修饰一个非静态的void()方法。被@PostConstruct修饰的方法会在服务器加载Servlet的时候运行，并且只会被服务器执行一次。@PostConstruct在构造函数之后执行，init()方法之前执行。通常我们会是在Spring框架中使用到@PostConstruct注解 该注解的方法在整个Bean初始化中的执行顺序：Constructor(构造方法) -> @Autowired(依赖注入) -> @PostConstruct(注解的方法)二、用途@PostConstruct主要用于处理一些初始化工作。比如下面代码@RestController @RequestMapping(value = "book") @Slf4j public class BookController { @Resource private IBookService bookService; /** * 构造函数 */ public BookController() { log.info("构造函数，此时bookService ：" + bookService); } @PostConstruct public void init() { log.info("PostConstruct，此时bookService ：" + bookService); } @GetMapping(value = "search") public List<Book> search() { return bookService.search(); } }看下控制台可以看到，构造函数里面，Bean还没有初始化,@PostConstruct里面已经完成初始化，所以，我们可以通过@PostConstruct完成一些初始化后的操作。
-
java泛型反序列化 其实不管前后端交互还有API接口，我个人更倾向于使用实体（DTO、VO）啥的，但是，有时候也不得不用Map等进行数据交互。一般而言，前后端或者接口之间交互都是通过JSON进行的，而我们在使用Map的时候，一般都是使用的泛型类，而不是使用原始类型，比如Map<String,string>，那么我们来看下下面一段代码。Map<String,String> bookMap = new HashMap<>(); bookMap.put("author","张三"); bookMap.put("name","山海经"); String bookMapString = JSONObject.toJSONString(bookMap); log.info(bookMapString);我们创建一个Map<String,String>，并将其序列化成字符串，如果我们放过来，想将字符串在反序列化成Map，我们首先想到的可能就像下面这样。Map bookMapNew = JSONObject.parseObject(bookMapString); log.info(String.valueOf(bookMapNew));程序有错吗？当然没错，但是优雅嘛，肯定是不优雅。其实这个时候，idea会给我们一个提示Raw use of parameterized class 'Map'，大概意思就是说这个类要使用泛型，如果不使用泛型，我们其实丢失了类型的安全性。这个时候，我们就想到了parseObject()的重载方法，通过第二个参数，传递进去类型，如果我们是普通的类，传递一个class进去是没问题的。比如我们改写一下上面反序列化的方法Map<String,String> bookMapNew = JSONObject.parseObject(bookMapString,Map.class);这个时候，idea又会给我们一个提示大意就是类型转换没有校验。那么有没有更加完美的方法呢，有的，那就是TypeReference类，我们继续改造代码如下Map<String,String> bookMapNew = JSONObject.parseObject(bookMapString,new TypeReference<Map<String,String>>(){});这回idea终于没有提示了运行一下，结果也是正确的
-
angular基础知识之路由 基本使用首先从@angular/router库中导入一些常量。修改我们的app.module.ts文件，增加以下内容import { RouterModule, Routes } from '@angular/router'; import { HashLocationStrategy, LocationStrategy, registerLocaleData } from '@angular/common';增加路由const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ]修改imports增加以下内容RouterModule.forRoot(routes),修改providers增加以下内容{ provide: LocationStrategy, useClass: HashLocationStrategy }安装路由器platformBrowserDynamic().bootstrapModule(AppModule)完整代码app.module.ts修改后，完整代码如下，请忽略无效内容import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http'; import { RouterModule, Routes } from '@angular/router'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { NZ_I18N } from 'ng-zorro-antd/i18n'; import { zh_CN } from 'ng-zorro-antd/i18n'; import { HashLocationStrategy, LocationStrategy, registerLocaleData } from '@angular/common'; import zh from '@angular/common/locales/zh'; import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NzDatePickerModule } from 'ng-zorro-antd/date-picker'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzFormModule } from 'ng-zorro-antd/form'; import { NzInputModule } from 'ng-zorro-antd/input'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzSelectModule } from 'ng-zorro-antd/select'; import { NzGridModule } from 'ng-zorro-antd/grid'; import { NzCardModule } from 'ng-zorro-antd/card'; import { SimpleHttpComponent } from './simple-http/simple-http.component'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { NzMenuModule } from 'ng-zorro-antd/menu'; import { AboutComponent } from './about/about.component'; import { HomeComponent } from './home/home.component'; registerLocaleData(zh); const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ] @NgModule({ declarations: [ AppComponent, SimpleHttpComponent, AboutComponent, HomeComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpClientModule, RouterModule.forRoot(routes), HttpClientJsonpModule, BrowserAnimationsModule, NzDatePickerModule, NzButtonModule, NzFormModule, NzInputModule, NzIconModule, NzSelectModule, NzGridModule, NzCardModule, NzMenuModule ], providers: [ { provide: NZ_I18N, useValue: zh_CN }, { provide: LocationStrategy, useClass: HashLocationStrategy } ], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule)创建模块我们创建两个模块，分别是Home、About修改App模板文件，配置路由<ul nz-menu nzMode="horizontal"> <li nz-submenu nzTitle="Home" nzIcon="mail" [routerLink]="['home']"></li> <li nz-submenu nzTitle="About" nzIcon="mail" [routerLink]="['about']"></li> </ul> <br /> <router-outlet></router-outlet><router-outlet>用于展示路由内容，[routerLink]用于配置节点的路由配置完成后，我们可以访问一下首页传递参数我们可能需要路由中传递参数，那么我们继续改造。修改路由参数修改about的路由，我们传递一个name属性。修改后如下const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about/:name', component: AboutComponent }, { path: 'about', component: AboutComponent } ]修改模块import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.css'] }) export class AboutComponent implements OnInit { route: ActivatedRoute; name: string = ""; constructor(route: ActivatedRoute) { this.route = route route.params.subscribe( param => { this.name = param['name'] console.log(param) } ) } ngOnInit(): void { } }修改about模板<p>about works!</p> <br> {{name}}
-
angular HTTP请求 Angular有自己的HTTP库，我们可以用它来调用外部API。 在老的版本中HTTP模块位于@angular/http ，新的版本已经迁移到@angular/common/http。导入http模块在app.module.ts中，引入http模块import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';然后注入模块@NgModule({ declarations: [ AppComponent, SimpleHttpComponent ], imports: [ HttpClientModule, HttpClientJsonpModule ], providers: [{ provide: NZ_I18N, useValue: zh_CN }], bootstrap: [AppComponent] })新建一个测试模块执行以下命令创建模块ng g c SimpleHttp引入HttpClient在新建模块的ts文件中，引入HttpClient模块，并在构造函数中注入。import { HttpClient } from '@angular/common/http'; private httpClient: HttpClient; constructor(httpClient: HttpClient) { this.httpClient = httpClient }使用let url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1" this.httpClient.get(url).subscribe((response) => { console.log(response); }, (err) => { console.warn(err) })其他除了get方法，还有我们常用的post、put、delete、request等方法。传递参数当然我们可以给后台传递参数的，这里我模拟一个login请求。post处理请求时，我们可能需要传递头部还有返回值类型信息，不然会报错。后台用Spring Boot模拟登陆@RestController public class LoginController { @PostMapping("login") @CrossOrigin public String Login(@RequestBody LoginEntity loginEntity){ LoginEntity entity = loginEntity; return "success"; } }前端完整调用代码import { Component, OnInit } from '@angular/core'; import { HttpClient ,HttpHeaders} from '@angular/common/http'; @Component({ selector: 'app-simple-http', templateUrl: './simple-http.component.html', styleUrls: ['./simple-http.component.css'] }) export class SimpleHttpComponent implements OnInit { private httpClient: HttpClient; private headers = new HttpHeaders({'Content-Type': 'application/json'}); constructor(httpClient: HttpClient) { this.httpClient = httpClient } ngOnInit(): void { let url = "http://localhost:8080/login" let param = { userName:'张三' } this.httpClient.post(url,param,{headers:this.headers,responseType:'text'}).subscribe(function(response) { console.log('我取到数据了：'+response) }, function(err){ debugger console.log('报错了:'+err) }) } }
-
-
-
简约精致苹果风格 LINUX 系统：CUTEFISHOS 近又新出了一个 Linux 桌面发行版「CutefishOS」基于 Ubuntu，桌面风格非常苹果味，根据官方的介绍，做更好的桌面操作系统、注重简洁、美观和实用性。访问{cloud title="" type="bd" url="https://pan.baidu.com/s/1KjdN-C2Vdf5OTVwKYXYh5Q" password="7dx2"/}天翼网盘：{cloud title="" type="ty" url="https://cloud.189.cn/web/share?code=Qzi6biUFfi2q" password="sbi6"/}官方：https://cn.cutefishos.com2021年09月12日昨天趁着周六在家里电脑安装了一下，简单说一下体会吧，因为我上午安装的，晚上就把电脑搞崩了￣□￣｜｜系统安装上之后，虽然是测试版，但是还是挺流畅的。整体界面比较简洁，类似Mac风格，但是感觉没那么精致。基于Ubuntu，所以Ubuntu的那套逻辑都能正常用。
-
angular监听表单变化及双向数据绑定 监听表单变化FormGroup及FormControl都带有EventEmitter（事件发射器）用于监控表单控件的变化。要监听控件的变化，我们通过以下步骤：通过调用control.valueChanges访问这个EventEmitter然后调用.subscribe方法添加一个监听器。html代码如下<nz-card style="width:300px;"> <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label> <nz-form-control [nzSpan]="14"> <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']"> <nz-tag *ngIf="myForm.controls['sku'].hasError('required') && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag> <nz-tag nzColor="error" *ngIf="myForm.controls['sku'].hasError('invalidSku')"> <i nz-icon nzType="close-circle"></i> <span>error</span> </nz-tag> </nz-form-control> </nz-form-item> <nz-form-item> <button type="submit" nz-button class="primary">Submit</button> </nz-form-item> </form> </nz-card>ts代码如下import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-demo-form-sku-form-builder', templateUrl: './demo-form-sku-form-builder.component.html', styleUrls: ['./demo-form-sku-form-builder.component.css'] }) export class DemoFormSkuFormBuilderComponent implements OnInit { myForm: FormGroup constructor(formBuilder: FormBuilder) { this.myForm = formBuilder.group({}) let formControl: FormControl = new FormControl("", Validators.compose( [Validators.required, this.skuValidator] )) this.myForm.addControl("sku", formControl) formControl.valueChanges.subscribe((value: string) => { console.warn('值改变' + value) }) this.myForm.valueChanges.subscribe((form: any) => { console.warn('表单改变：' + JSON.stringify(form)) }) } ngOnInit(): void { } onSubmit(form: any): void { debugger this.myForm.controls['sku'] console.log(form) } skuValidator(formControl: FormControl): { [s: string]: boolean } { if (!formControl.value.match(/^123/)) { return { invalidSku: true } } return { invalidSku: false } } } 双向数据绑定ngModel是一个特殊的指令，它将模型绑定到表单中。ngModel的特殊之处在于它实现了双向绑定。相对于单向绑定来说，双向绑定更加复杂和难以推断。Angular通常的数据流向是单向的：自顶向下。但对于表单来说，双向绑定有时会更加容易。我们在ts文件添加一个sku属性，修改后如下import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-demo-form-sku-form-builder', templateUrl: './demo-form-sku-form-builder.component.html', styleUrls: ['./demo-form-sku-form-builder.component.css'] }) export class DemoFormSkuFormBuilderComponent implements OnInit { myForm: FormGroup sku: string constructor(formBuilder: FormBuilder) { this.sku = '' this.myForm = formBuilder.group({}) let formControl: FormControl = new FormControl("", Validators.compose( [Validators.required, this.skuValidator] )) this.myForm.addControl("sku", formControl) formControl.valueChanges.subscribe((value: string) => { console.warn('值改变' + value) }) this.myForm.valueChanges.subscribe((form: any) => { console.warn('表单改变：' + JSON.stringify(form)) }) } ngOnInit(): void { } onSubmit(form: any): void { debugger this.myForm.controls['sku'] console.log(form) } skuValidator(formControl: FormControl): { [s: string]: boolean } { if (!formControl.value.match(/^123/)) { return { invalidSku: true } } return { invalidSku: false } } } html模板中通过[(ngModel)]绑定我们添加的属性<nz-card style="width:300px;"> <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label> <nz-form-control [nzSpan]="14"> <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']" [(ngModel)]="sku"> <nz-tag *ngIf="myForm.controls['sku'].hasError('required') && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag> <nz-tag nzColor="error" *ngIf="myForm.controls['sku'].hasError('invalidSku')" > <i nz-icon nzType="close-circle"></i> <span>error</span> </nz-tag> </nz-form-control> </nz-form-item> <nz-form-item> <button type="submit" nz-button class="primary">Submit</button> </nz-form-item> </form> <div> sku:{{sku}} </div> </nz-card>
-
angular验证器Validators及自定义验证器方法 angular预置验证器angular在Validators类中预置了部分验证器。可以通过如下代码导入import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';比如，我们使用一下必填验证required。首先看下ts代码，在ts文件中，我们通过注入FormBuilder,创建一个FormGroup,在FormGroup中添加一个名称为sku的FormControl，然后我们校验sku，要求用户必须输入。import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-demo-form-sku-form-builder', templateUrl: './demo-form-sku-form-builder.component.html', styleUrls: ['./demo-form-sku-form-builder.component.css'] }) export class DemoFormSkuFormBuilderComponent implements OnInit { myForm: FormGroup constructor(formBuilder: FormBuilder) { this.myForm = formBuilder.group({}) let formControl: FormControl = new FormControl("", Validators.required) this.myForm.addControl("sku", formControl) } ngOnInit(): void { } onSubmit(form: any): void { console.log(form) } }html代码如下<nz-card style="width:300px;"> <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label> <nz-form-control [nzSpan]="14"> <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']"> <nz-tag *ngIf="!myForm.controls['sku'].valid && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag> </nz-form-control> </nz-form-item> <nz-form-item> <button type="submit" nz-button class="primary">Submit</button> </nz-form-item> </form> </nz-card>myForm.controls['sku'].valid用于校验用户是否输出，myForm.controls['sku'].touched判断用户是否点击了控件。如果用户点击控件后，没有输入内容。自定义验证器自定义验证器其实就是一个方法，这个方法有如下特点：接收一个FormControl作为参数验证失败时，返回一个StringMap<string,boolean>对象，键是错误代码、值是truets文件如下import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-demo-form-sku-form-builder', templateUrl: './demo-form-sku-form-builder.component.html', styleUrls: ['./demo-form-sku-form-builder.component.css'] }) export class DemoFormSkuFormBuilderComponent implements OnInit { myForm: FormGroup constructor(formBuilder: FormBuilder) { this.myForm = formBuilder.group({}) let formControl: FormControl = new FormControl("", Validators.compose( [Validators.required, this.skuValidator] )) this.myForm.addControl("sku", formControl) } ngOnInit(): void { } onSubmit(form: any): void { console.log(form) } skuValidator(formControl: FormControl): { [s: string]: boolean } { if (!formControl.value.match(/^123/)) { return { invalidSku: true } } return { invalidSku: false } } }html代码如下<nz-card style="width:300px;"> <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label> <nz-form-control [nzSpan]="14"> <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']"> <nz-tag *ngIf="myForm.controls['sku'].hasError('required') && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag> <nz-tag nzColor="error" *ngIf="myForm.controls['sku'].hasError('invalidSku')"> <i nz-icon nzType="close-circle"></i> <span>error</span> </nz-tag> </nz-form-control> </nz-form-item> <nz-form-item> <button type="submit" nz-button class="primary">Submit</button> </nz-form-item> </form> </nz-card>如果我们输入的sku不是123开头，可以看到以下页面
-
angular内置指令 ngIf用来决定显示或隐藏元素，指令条件可以是表达式。app.component.html代码<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate"> <p *ngIf=false>1</p> <p *ngIf="doNotDisplay">2</p> <p *ngIf="display()">3</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { doNotDisplay: boolean = false display(): boolean { return true } } 隐藏的元素不会创建。ngSwitchngSwitch指令可以通过ngSwitchCase、ngSwitchDefault走不通的分支。app.component.html代码<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate" [ngSwitch]="choice"> <p *ngSwitchCase="1">1</p> <p *ngSwitchCase="2">2</p> <p *ngSwitchCase="3">3</p> <p *ngSwitchDefault>default</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { choice: string = "4" }ngStyle给DOM元素设置CSS属性。最简单的用法[style.property]=valueapp.component.html代码<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate"> <p *ngIf=false>1</p> <p *ngIf="doNotDisplay">2</p> <p *ngIf="display()" [style.background-color]="backgroundColor">3</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { doNotDisplay: boolean = false backgroundColor: string = 'red' display(): boolean { return true } }另外一种方式是使用键值对<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate"> <p *ngIf=false>1</p> <p *ngIf="doNotDisplay">2</p> <p *ngIf="display()" [ngStyle]="{'background-color':backgroundColor}">3</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>ngClassapp.component.css中定义一个类.bordered{ border: 1px dashed royalblue; }app.component.html代码<div [ngClass]="'bordered'" style="height: 400px;"></div>也可以通过如下代码<div [ngClass]="{bordered:false}" style="height: 400px;"></div>ngFor用于循环app.component.html代码<ul> <li *ngFor="let color of colors" [ngStyle]="{color:color}">{{color}}</li> </ul>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { colors:Array<String> constructor(){ this.colors=[ 'red','blue','green' ] } }循环时，我们也可以获取索引<ul> <li *ngFor="let color of colors;let index=index" [ngStyle]="{color:color}">{{index}}--{{color}}</li> </ul>ngNonBindable指定不编译或者绑定页面中的某个特殊部分。app.component.html代码<p ngNonBindable> {{content}} </p> <p> {{content}} </p>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { content:string="<div>content</div>" }innerHTML、innerText通过{{}}输出内容，会强制转换成文本。我们可以通过[innerHTML]输出html。[innerText]可以将html代码强制输出文本。app.component.html代码<div [innerHTML]="content"> </div> <div [innerText]="content"> </div>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { content:string="<div>测试</div>" }
