标签: angular-template

我有一个子组件，在其父组件中使用了两次，它使用 ngOnChaages 来更新值；

这一切都工作得很好，但现在我正在尝试根据通过@Input变量传递给它的信息来操作子模板。

我发现的是；当父组件首次加载时，模板变量在函数调用中未定义

这是有道理的，因为该函数是在onChanges方法内调用的，并且没有给模板足够的时间来加载。

我需要重构我的代码，但是如何重构呢？

目前，如果我使用它就可以了setTimeout

所以简单来说：

@ViewChild('myContainer', {read: ElementRef}) myContainer: ElementRef;
@Input() myUpdatingVar

ngOnChanges(): void {
  if (this.myUpdatingVar === someValue) {
      this.myFunc(this.someValue1);
   } else {
      this.myFunc(this.someValue2);
   }
}

myFunc(param){
   do stuff....
   this.updateDom(anotherParam);
}

updateDom(param) {
// If I use setTimeout this works
this.myContainer.nativeElement.querySelector(`#someId`); // Undefined
}

当我为内容元素折叠时,我有问题.当我按下按钮显示所有内容都显示但不只是这个内容的一个元素.

我跟随这个示例Plunker

这是我的HTML的一部分:

         <div *ngFor="#elem of apps">
               <div  class="col-md-5">
                  <div class="panel-heading">
                     <strong> {{elem.name}}</strong> on {{elem.host}} 
                  </div
                  <button type="button" (click)="isCollapsedContent= !isCollapsedContent">
               </div>
           </div>


           <div [collapse]="isCollapsedContent">
              <table class="table table-hover">
                   <thead>
                     <tr class="header">
                        <td>Property</td>
                        <td>Value</td>
                     </tr>
                   </thead>
                   <tbody>
                     <tr>
                        <td>app</td>
                         <td>{{elem.app}}</td>

                        <td>name</td>
                         <td>{{elem.name}}</td>

                        <td>host</td>
                         <td>{{elem.host}}</td>
                     </tr>
                   </tbody>
              </table>
           </div

我从API中添加了额外的布尔属性给我的JSON,名为show default set false.

[
{"app":"database_1",
 "host":"my_host1",
 "name":"name1",
 "show": false
},
{"app":"database_2",
 "host":"my_host2",
 "name":"name2",
 "show": false
},
{"app":"database_3",
 "host":"my_host3",
 "name":"name3",
 "show": false
},
]

如何只显示/隐藏一个元素？我可以为isCollapsedContent添加属性,例如:

<div [collapse]="isCollapsedContent(elem.show)">

我的 angular ui 路由器将状态/视图更改为：

    $stateProvider
        .state({
            name: 'home',
            url: '/',
            template: '<home-view></home-view>',
        })

有没有办法将绑定参数传递给 UI 路由器中的 < home-view > ？

例如

<home-view my-data="dataObject">

或者

<home-view my-data="myService.getMyData()">

my-view 的控制器位于包含实际模板和指令的自己的文件中。

导入此过滤器

// search module
import { Ng2SearchPipeModule } from 'ng2-search-filter';

它的 HTML 代码

//search

<input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder="search">

//Assigned filter to table

 <tr *ngFor="let bookName of NameOfBookList | filter:searchText">

任何帮助，将不胜感激。