angular 选中切换面板
此方法采用的是没有路由的方式;
html5 代码:
<div [hidden]="flag">
<li class="music-list-datails">热门</li>
<li class="music-list-datails" *ngFor="let c of category" [class.selected]="c === selectedc" (click)="onSelect(c)">{{c.category_name}}</li>
</div> <div *ngIf="selectedc">
<li class=" swiper-slide music-list-datails " (click)="goback()">返回上一级</li>
<li class="swiper-slide music-list-datails " *ngFor="let audio of selectedc ">{{audio.tag_name}}</li>
</div>
ts代码:
ts代码:
errorMessage: string;
category: Category[];
selectedc: Tag[];
flag;
constructor(private fmService: FMService, private location: Location) { }
ngOnInit() {
this.getCategoryList();
}
getCategoryList() {
this.fmService.getCategoryList().then(
category => {
this.category = category;
},
error => this.errorMessage = <any>error
)
} onSelect(c): void {
this.fmService.getAudiobook(c.id).then(
tag => {
this.selectedc = tag;
this.flag = true;
},
error => this.errorMessage = <any>error
)
}
angular 选中切换面板的更多相关文章
- 使用angular路由切换后 轮播以及iscrollJs失效的问题
我们在使用angular的时候,路由总是最让人头疼的地方. 在这里为大家解决一些用angular来回切换遗留下的小问题 比如我们在使用ng-route时如果主页面含有轮播图,当你切换到其他页面再切回主 ...
- js面向对象实现切换面板
js面向对象的特点: 继承(inheritance):对象方法和属性的继承 多态(polymorphism):组件开发 抽象(abstract):抓住核心问题 封装(encapsulation):把功 ...
- [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)
前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...
- jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换
1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...
- Angular——tab切换案例
基本介绍 angular框架下的tab切换,相比较于之前的纯js写的代码,有一个很大的特点就是以数据为驱动,基本上不用搜索dom元素就可以实现效果 基本使用 (1)导航部分使用的是的状态使用的是ng- ...
- 全选、取消、2级 checkbox的选中切换
需求:点击父级checkbox的时候,子级出现全选或全取消:点击子级时,如:子级都是在未选中时,点击某一个子级,则父级选中:如:子级中只有一个选中状态(其他子级都是未选中),点击该子级,则父级也改为未 ...
- GUI记事本+切换面板1.1版
package com.niit.javagui; import java.awt.Color; import java.awt.MenuBar; import java.awt.event.Inpu ...
- jq切换面板
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 关于JqueryEasyUI插件—Tab,默认选中某个面板 如果不明显指定的话,第一个就是被选中的
如果不明显指定的话,第一个就是被选中的,你可以通过data-options="selected:true"指定默认选中
随机推荐
- SQL基础学习_03_数据更新
数据的插入 1. 基本INSERT语句 INSERT的基本语法为: INSERT INTO <表名> (列1, 列2, 列3, -) VALUES (值1, 值2, 值 ...
- 关于 const 的一点小研究
在饱受 var 的折磨之后,ES6 终于推出了新的定义变量的方法:let 和 const 和 var 相比,let 和 const 有了自己的作用域,let 用于定义变量,而 const 用于定义常量 ...
- Nginx集群及代理的应用
目录 1 大概思路... 1 2 了解Nginx及文档资源... 1 3 Nginx命令模块及进程结构... 2 4 解读Nginx配置... 3 5 ...
- .net core .net standard .net framework
由于对微软的技术比较感兴趣,所以最近就在研究用Visual Studio Code开发一个Asp.net core项目并且准备从后端开始干起. 一开始用dotnet new console创建了一个控 ...
- yield next和yield* next的区别
yield next和yield* next之间到底有什么区别?为什么需要yield* next?经常会有人提出这个问题.虽然我们在代码中会尽量避免使用yield* next以减少新用户的疑惑,但还是 ...
- 强化学习之Sarsa (时间差分学习)
上篇文章讲到Q-learning, Sarsa与Q-learning的在决策上是完全相同的,不同之处在于学习的方式上 这次我们用openai gym的Taxi来做演示 Taxi是一个出租车的游戏,把顾 ...
- 关于javascript代码优化的8点建议
前面的话 本文将详细介绍JS编程风格的几个要点 松耦合 当修改一个组件而不需要更改其他组件时,就做到了松耦合 1.将JS从CSS中抽离:不要使用CSS表达式 //不好的做法 .box{width: e ...
- 固定sql语句传参批量查询数据库脚本
#!/usr/bin/env python # encoding: utf-8 import pandas as pd import psycopg2 conn_dv = psycopg2.conne ...
- 简单的基于hash和hashchange的前端路由
hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...
- springboot之集成mybatis mongo shiro druid redis jsp
闲来无事,研究一下spingboot 发现好多地方都不一样了,第一个就是官方默认不支持jsp 于是开始狂找资料 终于让我找到了 首先引入依赖如下: <!-- tomcat的支持.--> ...