1. Angular ngClass and click event for toggling class
<div class="my_class" (click)="clickEvent()"
[ngClass]="status ? 'success' : 'danger'">
Some content
</div>
status: boolean = false;
clickEvent(){
this.status = !this.status;
}
2. Setting (click) within *ngFor
I am looping through v.social and displaying social.icon, social.name and social.url within each . I would like to add a (click) action that includes the social.url parameter:
<ion-item *ngFor="let social of v.social" (click)="launch(social.url)">
<img src="{{ social.icon }}" item-left class="social-image">
<p>{{ social.name }}<br>{{ social.url }}</p>
</ion-item>
3. 一共有8个button,一个button对应一个图片,预期功能:点击button,图片出现。
要求:一个函数实现8个button的点亮事件。
less部分: 默认是opcity:0(对应的class="off");点亮是opcity:1(对应的class="on")。
html部分:
<div *ngFor="let model of bodyModel">
<button
nz-button
class="pi-button body-button {{ model.id }}"
[ngClass]=" model.active ? 'on' : 'off'"
nzType="primary"
(click)="light(model)"
>
</button>
<img
class="{{ model.id }}Light light"
src="{{ model.src }}"
alt="{{ model.id }}"
/>
</div>
ts部分:
import {BodyModel} from "model";
bodyModel = BodyModel;
light(model: ModelActivateRecord) {
this.bodyModel = this.bodyModel.map((r)=>{
if(r.id === model.id){
return {...r, active: !r.active};
}
else{
return r;
}
})
//light()的简略写法如下:
light(model: ModelActivateRecord) {
this.bodyModel = this.bodyModel.map(r =>
r.id === model.id ? { ...r, active: !r.active } : r
);
}
//注意,下面这种写法不可以,尽管可以实现功能:model.active = !model.active
model文件的ts部分如下:
export interface ModelActivateRecord {
id: string;
text: string;
src: string;
active: boolean;
}
export const BodyModel: ModelActivateRecord[] = [
{
id: "head",
text: "Head",
src: "assets/bodyModel/head.svg",
active: false
},
{
id: "neck",
text: "Neck",
src: "assets/bodyModel/neck.svg",
active: false
}
]
4. 错误类型:Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)
When custom modules are used (modules other than AppModule) then it is necessary to import the common module in it.
yourmodule.module.ts import { CommonModule } from '@angular/common'; @NgModule({ imports: [ CommonModule ], exports:[ ], declarations: [] })
5. BrowserModule 和 CommonModule
BrowserModule 导入了 CommonModule,它贡献了很多通用的指令,比如 ngIf 和 ngFor。 另外,BrowserModule 重新导出了 CommonModule,以便它所有的指令在任何导入了 BrowserModule 的模块中都可以使用。
对于运行在浏览器中的应用来说,都必须在根模块中 AppModule 导入 BrowserModule ,因为它提供了启动和运行浏览器应用时某些必须的服务。BrowserModule 的提供商是面向整个应用的,所以它只能在根模块中使用,而不是特性模块。 特性模块只需要 CommonModule 中的常用指令,它们不需要重新安装所有全应用级的服务。
如果你把 BrowserModule 导入了惰性加载的特性模块中,Angular 就会返回一个错误,并告诉你要改用 CommonModule。
//意思是browsemodule是保证应用在浏览器运行所必须的,而commonmodule其实是包含在browsemodule中的,只是也可以值导入commonmodule,它从browsemodule中导出为特定功能的module