小编Fla*_*ash的帖子

我正在使用 MatDialog 并尝试在内容定义中添加一个新行。双方\n并</b>没有这样做。有没有另一种方法而不必手动进入 html 并更改它，因为它是一个可重用的组件：

var status: MatDialogRef<GenericDialogComponent> this.dialog.open(GenericDialogComponent,{
     width: '400px',
    data: {title: "Sample Title?", content: "Document " + this.docID + " has been saved. The users email address is provied below:\n\n"+this.email+"</b>"} });

HTML

<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>
  <p>{{data.content}}</p>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="Cancel()">Cancel</button>
  <button mat-button (click)="Ok()" cdkFocusInitial>Ok</button>
</div>

我有一个垫子选择，我想根据条件更改所选值的颜色。基本上是为了向用户表明已进行更改。我知道我可以mat-select-value从样式中访问 ，但不确定如何使用 ng-class 对其实现条件：

<mat-form-field>
      <mat-select name="list"  
      [style.color]="myCondtition ? 'none': 'green'"
      (selectionChange)="change()">
        <mat-option *ngFor="let option of options" [value]="currentOption">
          {{option.viewvalue}}
         </mat-option>
      </mat-select>

我能够让像[style.font-weight],[style.background-color]和[style.font-size] 这样的东西工作，但没有font-color，只有 [style.color] 似乎只适用于输入。

有没有人有一个很好的解决方案来将内联文本编辑添加到列中，您可以在其中使用 mat 表进行编辑、保存和重新编辑，如本例所示：https : //material.io/design/components/data-tables.html#行为 看起来它仍然是 gitHub 上的一个悬而未决的问题：https : //github.com/angular/material2/issues/5982

我正在使用模板驱动的表单进行验证。当用户在最后一个必填字段上模糊时，我想将所有字段标记为已触摸。目前我只能通过传递表单并单独执行每个字段来做到这一点。从研究中我看到有一种方法可以执行 MarkAllAsTocuhed 但它会引发错误。有没有更好/正确的方法来使用 Angular 7 来做到这一点。我也尝试通过控件循环，但因为它是一个也不起作用的对象。

.HTML

 <form #myForm="ngForm">
    <mat-form-field class="input-field">
              <input #field1="ngModel" name="name1" 
             [(ngModel)]="fieldOne" type="text" matInput placeholder="Field 1" required>     
    </mat-form-field>

    <mat-form-field class="input-field">
              <input #field2="ngModel" name="name2" 
             [(ngModel)]="fieldTwo" type="text" matInput placeholder="Field 2" required>     
    </mat-form-field> 

    <mat-form-field class="input-field">
              <input #field2="ngModel" name="name3" 
             [(ngModel)]="fieldThree" type="text" matInput placeholder="Field 3" required>     
    </mat-form-field> 

    <mat-form-field class="input-field">
              <input #field3="ngModel" name="name4" 
             [(ngModel)]="fieldFour" type="text" matInput placeholder="Field 4" 
             (blur)="touchAllFields(myForm.form)" required>     
  </mat-form-field>
</form>

.TS

touchAllFields(form){
//Working Version
form.controls.name1.markAsTouched();
form.controls.name2.markAsTouched();
form.controls.name3.markAsTouched();
form.controls.name4.markAsTouched();
form.controls.name5.markAsTouched();
form.controls.name6.markAsTouched();
form.controls.name7.markAsTouched();
form.controls.name8.markAsTouched();

//Failed Attempt
form.controls.markAllAsTouched(); //typeError: form.controls.markAllAsTouched is not a function …

我有一个字符串 json 对象，我试图在 html 中格式化和显示它。我曾尝试使用JSON.parse()andJSON.stringify()但 typeof 仍然显示为字符串，并且显示为直线而不是 format 。我也试过了<pre> {{formatJson | json}}</pre>，还是没有成功。

formatJSON: string  = '{"a":1,"b":2,"c":{"d":3, "e":4}}'

ngOnInit() {
  var test = json.parse(this.formatJSON);
  console.log(typeof test); //string
  this.formatJSON = JSON.stringify(test, null, "   ")

}

HTML代码：

<div>
  <textarea [(ngModel)]="formatJSON" class="text-area" cols="200" rows="10">
       {{formatJSON}}
  </textarea>
</div>


<!-- <pre>{{formatJSON | json}}</pre> -->

期望输出：

我成功地将 mat Indicator 向左移动，而不是向右移动，并且我使用了 transform 属性使其在展开时向内转动。但是，我希望指标在展开时朝上，在折叠时朝下。我如何正确设置样式以实现此目的：https : //stackblitz.com/edit/indicatorrotation?file=styles.css

扩展概述-example.css

  .mat-expansion-panel-header {
       flex-direction: row-reverse;
   } 

全局样式.css

  .mat-expansion-indicator::after {
      transform: rotate(225deg) !important;  
}

我已经看到了一些可能的解决方案。解决方案1可以正常工作，但是在解决方案2中，它仅重复了我的数组5次。

test: string[]= ['apple', 'banna', 'mango', 'orange', 'pear'];

HTML解决方案1：

<p *ngFor="let x of test; let isLast=last">{{test}} {{isLast ? '' : ','}}</p>

HTML解决方案2

<p *ngFor="let x of test">{{test.join(",")}}</p>

也尝试了这个，没有用：

// <p *ngFor="let x of test">{{x.join(",")}}</p>

有没有办法在特定列上禁用行扩展。通常，如果您单击一行的任何部分，它就会展开。但是假设一列是评论部分，当用户单击输入字段时，您不希望该行展开。就像在这个例子中一样。单击位置列时如何防止行扩展：https : //stackblitz.com/angular/gqvrlgbeqkv?file=app%2Ftable-expandable-rows-example.ts