相关疑难解决方法(0)

我创建了一个自定义组件,我放在一个for循环中,例如

<div *ngFor="let view of views">

     <customcomponent></customcomponent>

</div>

其输出将是:

<customcomponent></customcomponent>
<customcomponent></customcomponent>
<customcomponent></customcomponent>

我想知道当这些组件的数量可以变化时,如何使用@viewchild语法或任何其他方法来获取对这些组件的引用

当组件可以给出一个名称,例如

<customcomponent #compID></customcomponent>

我可以参考如下:

@ViewChild('compID') test: CustomComponent

如果不是这种情况,我如何引用它,例如可能使用索引？

(此问题与使用ElementRef无关,因为之前已经提到的其他问题可以通过下面列出的答案看到)此问题涉及访问多个@ViewChild和使用列表查询.

多个自动完成在同一页面中,角度为4的不同来源与角度材质:

来源:https://material.angular.io/components/autocomplete/examples

我已经按照材料自动完成示例并尝试在同一页面中添加一个自动完成,但源不同但不起作用.

formcontrol正在创造问题吗？

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';

@Component({
  selector: 'autocomplete-overview-example',
  templateUrl: 'autocomplete-overview-example.html',
})
export class AutocompleteOverviewExample {
  stateCtrl: FormControl;
  testCtrl: FormControl;
  filteredStates: any;
  filterTests:any;
tests = [
    'Nawab',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California'];
  states = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'Florida',
    'Georgia',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New …

我有一个带有 ngfor 的 mat-accordion，当您单击面板时，会显示一个表格。
除了垫排序之外，一切都按预期工作，它只对第一个表进行排序。
我读到我需要将模板引用变量放在每个表中，但我如何动态地做到这一点？或者有其他一些方法来实现这一点。
这是我的代码：

  <mat-accordion style="width: 80%">
<mat-expansion-panel *ngFor="let customer of customers; let i = index" (opened)="openPanel(customer);">
  <mat-expansion-panel-header>
    <mat-panel-title>
      {{customer.name}}
    </mat-panel-title>
    <mat-panel-description>
      <span style="text-align:center">{{" Active Calls: " + customer.active}}</span>
      <span style="margin-left: 100px;">{{" Talking Calls: " + customer.talking}}</span>
    </mat-panel-description>
  </mat-expansion-panel-header>
  <table #HERE-I-NEED-TO-PUT-DYNMIC-ID mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container *ngFor="let column of tableColumns;" matColumnDef="{{column.field}}">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.name}} </th>
      <td mat-cell *matCellDef="let element">
         <span *ngIf="column.field !== 'answered'"> {{element[column.field]}} </span>
         <span *ngIf="column.field === 'answered' && element[column.field] > 0">{{getTime(element[column.field] * 1000) …

我有一个组件，它根据客户端设备大小切换组件的模板。组件代码为：

import {Component} from '@angular/core';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';

@Component({
    selector: 'ui-switcher',
    template: `
        <ng-content *ngIf="isSmall" select="mobile"></ng-content>
        <ng-content *ngIf="!isSmall" select="web"></ng-content>
`
})
export class UiSwitcherComponent {
    public isSmall: boolean;

    constructor(breakpointObserver: BreakpointObserver) {
        breakpointObserver.observe([Breakpoints.Small, Breakpoints.XSmall]).subscribe(result => {
            this.isSmall = result.matches;
        });
    }    
}

我像这样使用它：

<ui-switcher>
    <web>
        <!-- some commented details -->
        <input class="form-control mr-2" #searchInput 
        type="text" (keyup)="this.search(searchInput.value)">
    </web>

    <mobile>
        <!-- some commented details -->
        <input class="form-control" #searchInput 
        type="text" (keyup)="this.search(searchInput.value)">
    </mobile>
</ui-switcher>

在移动尺寸中，一切正常，但在桌面尺寸中，传递给search(value)函数的值始终为空字符串。

当我调试应用程序时，似乎#searchInputtemplateref 工作不正常（它引用的元素的值始终为空）。

为什么模板引用不能正常工作？