此方法采用的是没有路由的方式;

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 选中切换面板的更多相关文章

  1. 使用angular路由切换后 轮播以及iscrollJs失效的问题

    我们在使用angular的时候,路由总是最让人头疼的地方. 在这里为大家解决一些用angular来回切换遗留下的小问题 比如我们在使用ng-route时如果主页面含有轮播图,当你切换到其他页面再切回主 ...

  2. js面向对象实现切换面板

    js面向对象的特点: 继承(inheritance):对象方法和属性的继承 多态(polymorphism):组件开发 抽象(abstract):抓住核心问题 封装(encapsulation):把功 ...

  3. [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)

    前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...

  4. jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换

    1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...

  5. Angular——tab切换案例

    基本介绍 angular框架下的tab切换,相比较于之前的纯js写的代码,有一个很大的特点就是以数据为驱动,基本上不用搜索dom元素就可以实现效果 基本使用 (1)导航部分使用的是的状态使用的是ng- ...

  6. 全选、取消、2级 checkbox的选中切换

    需求:点击父级checkbox的时候,子级出现全选或全取消:点击子级时,如:子级都是在未选中时,点击某一个子级,则父级选中:如:子级中只有一个选中状态(其他子级都是未选中),点击该子级,则父级也改为未 ...

  7. GUI记事本+切换面板1.1版

    package com.niit.javagui; import java.awt.Color; import java.awt.MenuBar; import java.awt.event.Inpu ...

  8. jq切换面板

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  9. 关于JqueryEasyUI插件—Tab,默认选中某个面板 如果不明显指定的话,第一个就是被选中的

    如果不明显指定的话,第一个就是被选中的,你可以通过data-options="selected:true"指定默认选中

随机推荐

  1. 韩顺平教学资源java、oracle、linux

    http://blog.itpub.net/28688617/viewspace-766392/

  2. [Redis源码阅读]dict字典的实现

    dict的用途 dict是一种用于保存键值对的抽象数据结构,在redis中使用非常广泛,比如数据库.哈希结构的底层. 当执行下面这个命令: > set msg "hello" ...

  3. Micropython教程之TPYBoardv102 DIY蓝牙智能小车实例

    1.实验目的 1.学习在PC机系统中扩展简单I/O接口的方法. 2.进一步学习编制数据输出程序的设计方法. 3.学习蓝牙模块的接线方法及其工作原理. 4.学习L298N电机驱动板模块的接线方法. 5. ...

  4. QQ音乐API-借他人之力实现我的音乐盒

    好久没有写博客了,最近升级做爸爸了,很开心的事情.内心又很忧郁,怎么能给媳妇和儿子一个相对好的物质经济条件.现在什么都没有的我,至少还有你们. 话不多说了,这篇博客还是和自己用vue做web app相 ...

  5. JS 时间转换为时间戳

    Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+& ...

  6. python_IO编程

    本篇文章将介绍python里面的I/O编程.更多内容请参考:python学习指南 I/O编程 读写文件时最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们必须了解 ...

  7. Virtual Box配置CentOS7网络

    1.先管理中配置两个网络 最好的办法就是使用两块网卡,nat(虚拟机访问互联网,使用10.0.2.x段)和host-only(虚拟机和主机互相通信,使用192.168.56.x段) 2.接下来对Cen ...

  8. 从交叉熵损失到Facal Loss

    1交叉熵损失函数的由来1.1关于熵,交叉熵,相对熵(KL散度) 熵:香农信息量的期望.变量的不确定性越大,熵也就越大,把它搞清楚所需要的信息量也就越大.其计算公式如下: 其是一个期望的计算,也是记录随 ...

  9. shiro真正项目中的实战应用核心代码!!!

    欢迎转载!!!请注明出处!!! 说道shiro的学习之路真是相当坎坷,网上好多人发的帖子全是简单的demo样例,核心代码根本没有,在学习过程中遇到过N多坑. 经过自己的努力,终于整出来了,等你整明白之 ...

  10. JavaScript 数组对象的去重

    JavaScript数组去重 1.原型去重法.通过prototype找到数组的源性对象Array,在数组的原型上添加unique()方法.需要使用的时候使用 点 " . " 进行连 ...