小编Tal*_*ode的帖子

在我的angular 5项目中,使用typescript我在这样的字符串上使用.trim()函数,但它不是删除空格而且也没有给出任何错误.

this.maintabinfo = this.inner_view_data.trim().toLowerCase();
// inner_view_data has this value = "Stone setting"

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-1-4.html本文明确指出,这.trim()是打字稿的一部分.

从typescript中的字符串中删除空格的最佳方法是什么？

我正在使用material.angular.io中的mat-auto完整组件.默认行为是用户可以输入任何值,并提供可供选择的选项.您还可以将输入添加到所选值.你可以在这里查看示例. https://stackblitz.com/angular/ngmvgralayd?file=app%2Fautocomplete-simple- example.html

这是我用于生成自动完成输入字段的代码.

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" disabled="true">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

但我希望表单字段仅从给定选项中获取值,并希望除了给定选项之外,不希望用户输入任何值.怎么做到这一点？它就像具有自动完成功能的选择输入.

我突然出现这个错误

Module not found: Error: Can't resolve '@angular/flex-layout' in '\src\app'

安装@ angular / cdk后，发生此错误，

发生此错误后，我再次使用以下命令安装了flex-layout

 npm install @angular/flex-layout

但是现在有错误

Module not found: Error: Can't resolve '@angular/http' in '\src\app'

如果我安装了http，则其他模块将丢失。如何制止这种情况？出了什么问题？

如果我安装@ angular / http，那么它再次以

Module not found: Error: Can't resolve '@angular/flex-layout' in '\src\app'

我在Angular 5项目中使用Angular Material表创建网格。我的数据来自http请求，并将其分配给名为dataSourceNew的变量，如view.ts文件中所示。这里dataSourceNew具有动态内容和结构，因此我不导出任何接口。

      this.http.get('http://example.org?,{headers: this.headers})
          .subscribe(
          res => { 

           this.displayedColumnsNew = res.record;
           this.dataSourceNew = res.data;
           this.matdatasource = new MatTableDataSource(this.dataSourceNew);
           this.dataSourceNew.paginator = this.paginator;
           console.log("got matdatasource object",this.matdatasource);
      // attached the result of this log below

         });

我可以使用html文件中的这种语法成功创建数据表。

     <div class="example-container mat-elevation-z8">
           <mat-table #table [dataSource]="dataSourceNew">


       <ng-container  *ngFor="let head of tableData.record; let i= index; " matColumnDef="{{head}}" (click)="setClickedRow(ddata) "  [class.active]="ddata[primaryid] == selectedRow">
               <mat-header-cell *matHeaderCellDef> {{tableData.gridhead[i]}} 
                </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element[head]}} </mat-cell>
         </ng-container>


     <mat-header-row *matHeaderRowDef="displayedColumnsNew"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumnsNew;">
        </mat-row>
            </mat-table>
     </div>

现在，我想在此表上添加分页，为此，我声明了这一点

 @ViewChild(MatPaginator) paginator: …

我在 angular 5 应用程序中有以下代码。它使用 *ngFor 生成如下图所示的 mat-card 序列。但是所有 mat-card 的高度与第一个 mat-card 的高度相同。

         <div fxLayout="row">
          <mat-card *ngFor="let section1 of sections" fxFlex="33" style="margin: 15px;">
               <mat-card-header>
                    <mat-card-title>{{section1}}</mat-card-title>
               </mat-card-header>
               <mat-card-content>
                    <form>
                      <!-----form data goes here ---->
                    </form>

               </mat-card-content>

         </mat-card>

      </div>

结果是下面的垫卡列表，但问题是所有垫卡的高度与循环中第一张垫卡的高度相同。有没有办法根据它承载的内容使其动态化？

我在我的项目中使用 Angular Material.io 选项卡，如下所示。但我只能在更改选项卡时获取所选选项卡的标签，我想在更改事件上传递自定义数据（AllTabData 变量），以便我可以使用共享服务更改全局变量，或者从基于选项卡选择的服务器。

         <mat-tab-group (selectedTabChange)="onTabChange($event)">

               <mat-tab  *ngFor="let tabname of tablist"  label="
          {{AllTabData[tabname]['Name']}}">

                      <!---tab content --->

                </mat-tab>

         <mat-tab-group> 

在组件中，我有这样的 onTabChange 函数

 public onTabChange(tabChangeEvent: MatTabChangeEvent): void {
        console.log(tabChangeEvent);
    }

这是我在控制台中使用 tabChangeEvent var 得到的内容，

我正在使用angular 5中的父子关系创建一个具有多个组件的应用程序.

在我的主app.component.html里面我有这个结构.

        <app-layout-header></app-layout-header>
           <app-layout-view></app-layout-view>
           <app-layout-add></app-layout-add>

           <router-outlet></router-outlet>

        <app-layout-footer></app-layout-footer>

这个指令"app-layout-header"负责加载侧导航和顶部导航.

现在这个指令"app-layout-view"负责加载这样的数据表或网格.

我想使用flex布局,以便我可以使它响应,我也想要这样的最终结果.

但我不确定如何将数据表准确放置在我想要的位置,即在top-nav-bar下方并靠近侧边菜单.目前,它位于整个侧面菜单的下方,您可以在第二张图片中看到.

我现在该怎么办才能得到理想的结果？

我正在开发一种具有反应性动态角度形式的应用程序。此表单字段来自API请求，并且是动态生成的。

我确实需要在所需的表单输入中添加“必填字段”星号（*）。如何实现呢？

以下是我的表单字段的外观。

<ng-container *ngIf="input1.type=='string'" [hidden]="False">
 <div>
  <mat-form-field>
   <input matInput   [formControlName]="input1.field_name"  type="text"  placeholder="{{input1.title}}">
  </mat-form-field>   
 </div>
</ng-container>

我在应用程序中使用了材料选择元素mat-select。我想在选择字段下方加载选项列表，就像常规选择框一样，而不是使用叠加样式。为此，我将以下样式应用于给定的select元素。

             <mat-form-field>
                  <mat-select [formControlName]="input1">
                        <mat-option>None</mat-option>
                        <mat-option *ngFor="let opt_value of  input1.enumNames; let i = index" value="{{input1.enum[i]}}" >{{opt_value}}</mat-option>
                  </mat-select>

             </mat-form-field>   

这是我在检查负责任元素后应用的样式。

.mat-select-panel {
   transform: translate(-2px, 44px) !important;
  font-family: Lato,sans-serif;

}

现在，当我第一次单击选择字段时，选项列表将根据需要加载，就在选择字段的下面。像这样...

但是在选择任何选项（“ none”除外）之后，如果再次单击该字段以更改选项，则选项列表将以这种旧材质样式加载，并将我的选择字段隐藏在黄色高亮显示的某处。

如何正确设置Mat-options或mat-select-panel的样式，以便始终获得第一张图片的结果。

有没有办法在Mac OS系统启动时自动启动activemq服务器？我希望每次启动系统时它都会启动。

我试图在官方文档中查找，但没有找到。

我正在创建一个组件来重用它的代码.

@Component({
    selector: 'app-jform',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './jform.component.html',
    styleUrls: ['./jform.component.css']
})
export class JformComponent implements OnInit {

     @Input('init') modulename:string = '';

     ngOnInit() {
        this.getJsonForm();
        console.log(this.modulename); 
     }
}

在另一个竞争对手的视图文件中,我有这个选择器的用法如下,

<app-jform [modulename]="Blue32"></app-jform>

现在我无法在控制台中将modulename作为"Blue32".我已经导入了输入模块,我没有得到任何其他错误.

更新:根据@SurenSrapyan的建议,我更改了@Input声明.仍然以某种方式无法得到它.

现在,我在控制台中"未定义".

我想调用共享服务功能表单“另一个”组件的视图文件。

例如，要删除一条记录，我想设置以下内容：

<tr *ngFor="let ddata of tableData.data; let i = ddata" 
(click)="delete_record(ddata)" 
[class.active]="ddata.discountauthorizationid == selectedRow">

这delete_record必须是我将在相关组件中注入的服务的一部分。