小编nac*_*_dh的帖子

如何在ngFor中将对象作为组件输入传递

我正在尝试迭代一组Audio对象(包含3个字符串)并将每次迭代中的音频传递给子组件.

app.component.ts

ngOnInit(){
    this.audios = new Array<SoundBoardAudio>();
    this.audios.push(new SoundBoardAudio('Western','La canción del Sheriff.','western.mp3'));
    this.audios.push(new SoundBoardAudio('Olvidelo Amigo','Busquese otro tonto amigo.','olvidelo_amigo.mp3'));
  }
Run Code Online (Sandbox Code Playgroud)

app.component.html

 <div class="container">
      <app-soundcard *ngFor="let audio of audios" soundBoardAudio=audio></app-soundcard>
    </div>
Run Code Online (Sandbox Code Playgroud)

soundboard.component.ts

export class SoundcardComponent implements OnInit {

  audio:any;

  constructor() {}

  @Input() soundBoardAudio;

  ngOnInit() {
    console.log(this.soundBoardAudio);
    let audioSrc = 'assets/audio/'+this.soundBoardAudio.filename;
    this.audio = new Audio(audioSrc);
  }
...
Run Code Online (Sandbox Code Playgroud)

soundboard.component.html

<div class="card" >
  <div class="card-block">
    <h2 class="card-title">{{soundBoardAudio.name}}</h2>
    <p>{{soundBoardAudio.desc}}
  </div>
...
Run Code Online (Sandbox Code Playgroud)

但是当我尝试从子组件中读取音频时,我得到一个未定义的值.如果我只传递一个字符串而不是一个对象,它可以正常工作.

angular

9
推荐指数
1
解决办法
1万
查看次数

如何启用Postman的Newman详细输出?(显示请求的正文)

当使用Newman运行集合测试时,我希望它显示发送的请求主体,以获得更详细的测试记录(并确保正确替换环境变量).

我检查了项目文档中的Newman命令行选项,但没有找到任何内容,并且此旧问题中描述的-O选项无效.

我想知道如何激活详细输出.

postman

7
推荐指数
1
解决办法
5041
查看次数

Bootstrap 3 - 如何在折叠导航栏中正确显示按钮(btn-navbar)?

我使用以下HTML代码制作了一个包含3个按钮(btn-navbar)的页脚.折叠导航栏时,我可以正确地进行操作,但按钮显示在同一行中,而不是像<li>元素一样显示在一起.

  <!-- Fixed navbar bottom -->
  <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container-fluid">

      <div class="navbar-collapse collapse" id="navbar-footer">

        <ul class="nav navbar-nav navbar-right">

          <button type="button" class="btn btn-warning navbar-btn"><span class="glyphicon glyphicon-check"></span> Verificar</button>
          <button type="button" class="btn btn-danger navbar-btn"><span class="glyphicon glyphicon-remove"></span> Cancelar</button>
          <button type="button" class="btn btn-success navbar-btn"><span class="glyphicon glyphicon-ok"></span> Aceptar</button>

        </ul>

      </div><!--/.nav-collapse -->

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-footer">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

      </div>

    </div>
  </div>
Run Code Online (Sandbox Code Playgroud)

它显示这样......

页脚

而且我希望它像这样展示......

头

提前致谢.

html css navbar twitter-bootstrap

4
推荐指数
1
解决办法
2万
查看次数

如何运行指向另一个目录的“jekyll serve”?

现在我必须在我想要服务的目录中才能运行“jekyll serve”。有什么办法可以在另一个目录中指向我想要提供服务的目录吗?就像是:

jekyll serve --dir=anotherFolder

jekyll

2
推荐指数
1
解决办法
758
查看次数

Ionic 2 中央圆形标签

我正在开发一个带有选项卡导航的 Ionic 2 应用程序,如 Ionic 文档中所述:http://ionicframework.com/docs/components/#tabs-icon-text

在此输入图像描述

选项卡栏有 5 个选项卡,我想突出中央选项卡,使其呈圆形,如下图所示。

我没有看到框架提供任何标准方法来做到这一点,使用 CSS 实现这一点的最简单方法是什么?

在此输入图像描述

css mobile user-interface user-experience ionic2

2
推荐指数
1
解决办法
2766
查看次数