小编DDD*_*DDD的帖子

在我的mat-table中，这里有6列，当任何一列没有更多的单词时，它看起来像Image-1，但是当任何一列有更多单词时，UI看起来像Image-2，那么如何将UI设置成像Image-1一样列中的第6个角中有更多单词？

图片1

图片2

user.component.html

<div class="mat-elevation-z8">      
 <table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="userimage">
    <th mat-header-cell *matHeaderCellDef> # </th>
    <td mat-cell *matCellDef="let element"> 
      <img src="{{commonUrlObj.commonUrl}}/images/{{element.userimage}}" style="height: 40px;width: 40px;"/>
    </td>
  </ng-container>

  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef> Full Name </th>
    <td mat-cell *matCellDef="let element"> {{element.username}} ( {{element.usertype}} )</td>
  </ng-container>

  <ng-container matColumnDef="emailid">
    <th mat-header-cell *matHeaderCellDef> EmailId </th>
    <td mat-cell *matCellDef="let element"> {{element.emailid}} </td>
   </ng-container>

  <ng-container matColumnDef="contactno">
    <th mat-header-cell *matHeaderCellDef> Contact No. </th>
    <td mat-cell *matCellDef="let element"> {{element.contactno}} </td>
  </ng-container>

  <ng-container matColumnDef="enabled">
    <th mat-header-cell *matHeaderCellDef> Enabled </th> …

在这里，我modeling-agency component在这个组件中有一个用于路由的按钮，editModelingAgency/{{elememt.userid}}单击该按钮，该特定用户和链接上的链接路由看起来像这样，/base/editModelingAgency/15但我想显示这样的链接/base/editModelingAgency并隐藏参数，这怎么可能？

建模-agency.component.html

<ng-container matColumnDef="action">
  <th mat-header-cell *matHeaderCellDef> Action </th>
   <td mat-cell *matCellDef="let element">
     <button mat-raised-button routerLink="/base/editModelingAgency/{{element.userid}}"></button>
   </td>
 </ng-container>

app-routing.modulets

const routes: Routes = [
 { path: '', redirectTo: 'login', pathMatch: 'full' },
 { path: 'login', component : LoginFormComponent },   
 { path : 'base', component : BaseComponent,canActivate : [AuthguardGuard],canActivateChild : [AuthguardGuard],runGuardsAndResolvers: 'always',
  children: [
   { path: '', redirectTo: 'dashboard', pathMatch: 'full' },    
   { path: 'dashboard', component : DashboardComponent },
   { path: 'modelingAgency', …

this.folderObj.folderName是字符串和我打印console的那个字符串aaa aaa,我使用trim()但它只删除白色空格之前和之后,如何删除两个字的字符串之间的多个空格,并希望输出像这样aaa aaa

  folderObj : Folder = new Folder();

  console.log(this.folderObj.folderName.trim());  // aaa         aaa

我想要的预期控制台

console.log(this.folderObj.folderName.trim())  // aaa aaa

我必须将对象作为来自 node.js 的有效负载进行排列，并将其存储在不同的变量中并进行迭代，但 *ngFor 仅迭代第一个循环而不是第二个循环，因此如何在同一个 div status.component.html 中迭代

<div *ngFor="let payload1 of payload1;let payload2 of payload2;">
  <h4>{{payload2.username}}</h4>
  <h4>{{payload1.date}}</h4>
</div>

status.component.ts

payload1 = [];
payload2 = [];

ngOnInit() {
  this.statusService.getStatusDetails(this.statusObj).subscribe(
    (data) => {
      if(data.status == 26){
        this.payload1 = data.payload[0];
        this.payload2 = data.payload[1];
      }
    }
 );
}

当我单击通知或仪表板或注释时，我想使用红色突出显示它，这时我有多个mat-list-item。

<mat-list>
   <mat-list-item style="cursor: pointer" routerLink="/base/dashboard">Dashboard</mat-list-item>
   <mat-list-item style="cursor: pointer" routerLink="/base/notification">Notification</mat-list-item>
   <mat-list-item style="cursor: pointer" routerLink="/base/comments">Comments</mat-list-item>
</mat-list>

这里我有多个mat-icons,删除名为mat-icon我想禁用我在此使用禁用属性但它给出了错误(不能绑定到'禁用',因为它不是'mat-的已知属性icon')所以如何在角度6中显示特定的mat-icon

<mat-icon color="warn" style="cursor: pointer;" [disabled]="payloadArray.enabled != 'true' ">delete</mat-icon>
<mat-icon color="warn" style="cursor: pointer;">person_add</mat-icon>

新状态.component.ts

<mat-form-field>
  <textarea matInput placeholder="Status Content" style="height: 200px;"></textarea>
  <emoji-mart title="Pick your emoji…" emoji="point_up"></emoji-mart>
</mat-form-field>

我按照此链接获取解决方案（https://github.com/TypeCtrl/ngx-emoji-mart），现在我想将表情符号选择器放在输入字段或文本区域中。

在这里，我选择了多个图像并使用进行显示，*ngFor然后放置了一个删除按钮，该按钮出现在屏幕截图中，单击“删除”按钮。

add.component.html

<button mat-raised-button (click)="fileInput.click()">Select File</button>

<input style="display: none" type="file" (change)="onFileChanged($event)" #fileInput multiple="true">

<div *ngFor="let selected of selectedFile;let index = index">
  <h3>{{selected.name}}</h3>
  <button mat-icon-button (click)="removeSelectedFile(index)">delete</button>
</div>

add.component.ts

selectedFile: File;
ArrayOfSelectedFile = new Array<string>();

onFileChanged(event : any) {
  this.ArrayOfSelectedFile= [];
  this.selectedFile = event.target.files;
  this.ArrayOfSelectedFile.push(event.target.files);
}

removeSelectedFile(index){
  this.ArrayOfSelectedFile.splice(index,1);
}

我在 mat-table 中有多个 mat-icon（动态出现）。当我单击特定的垫子图标以切换垫子图标时，它会切换所有垫子图标，但我只想切换单击的垫子图标。这该怎么做？

按照.component.html

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef> Full Name </th>
    <td mat-cell *matCellDef="let element"> {{element.username}} </td>
  </ng-container>

 <ng-container matColumnDef="action">
   <th mat-header-cell *matHeaderCellDef> Follow </th>
     <td mat-cell *matCellDef="let element">
       <button mat-mini-fab color="primary" (click)="toggleIcon()"><mat-icon>{{icon}}</mat-icon></button>
    </td>
 </ng-container>
</mat-table>

跟随.component.ts

  dataSource : MatTableDataSource<PeriodicElement> ;
  displayedColumns: string[] = ['username','action'];  

toggleIcon() {
  if (this.icon === 'person_add_disabled') {
    this.icon = 'person_add';
  } else {
    this.icon = 'person_add_disabled'
  }
}

this.supportService.getUsersListForFollowing({'userid':this.userid}).
  subscribe((data) => {
   if(data.status == 1){
     this.dataSource = new MatTableDataSource<PeriodicElement>(data.payload);
   } …

客户端我使用 Angular 6，服务器端我使用 node.js。

在 angular 6 控制台中，它会socket.io id({message: "Hello World", id: "6An-ctwlwbZZWrfMAAAB"}) 在使用以下代码后打印消息 。

此代码是正确的或此代码中的任何更改 bcoz 我不确定此代码，请帮助纠正此问题。

另一个问题是我的项目中有超过 15 个组件，所以如何将它socket.io用于所有组件，或者我必须app.component.ts在所有其他组件中导入此代码。

app.js（服务器端）

after installing (npm i socket.io)

const express = require('express');
var app = express();
const http = require('http');
const socketIo = require('socket.io');
const server = http.Server(app);
const io = socketIo(server);

server.listen(3000,function(req,res){
  console.log("listen at 3000!");
});

io.on('connection',(socket) => {
  socket.emit('hello',{
    message : 'Hello World',id: socket.id
  })
});

app.component.ts(客户端)

after installing (npm i socket.io)

import * …