小编Edr*_*ric的帖子

我将 Angular v5 与 Angular Material 一起使用。我有一个mat-select我想在选择一个选项后保持打开状态，因为我想通过单击特定按钮显式触发关闭。我试图把(click)="$event.stopPropagation()在mat-option标签，但并没有工作。有任何想法吗？？

我在这里创建了一个简单的例子： stackblitz demo

我正在尝试用 Flutter 做这种事情：https : //storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F0B3T7oTWa3HiFcHBDaTlreHdVZGc%2Fitem-selection-selecting-items.mp4

var gestureTemp = GestureDetector(
    onLongPress: (){
      print('LONG PRESSED');
      //CHANGE APPBAR
    },
    child: Padding(
        padding: EdgeInsets.only(right:8),
        child: Chip(
            avatar: CircleAvatar(
                backgroundColor: Colors.grey.shade800,
                child: icon
            ),
            label: Text(space.label, style: TextStyle(fontSize: 12, color:Colors.grey.shade800))
    ),
  ));

它检测到长按，但我不知道如何更改我的应用栏...

有任何想法吗 ？

编辑：这就是我所做的

var appBar1 = AppBar(...);
var appBar2 = AppBar(...);
var appBar = appBar1;

我的 appBar 显示在我的 Scaffold 中。

在我的 GestureDetector 上：

onLongPress: (){
  print('LONG PRESSED');
  setState(() {
    appBar = appBar2;
  });
},

我有一个 Angular Material Mat-Card，我需要添加插值以将内容字符串添加到 mat-card-content。

以下作品无需插值

 <mat-card-content>
            <p>Guidelines.</p>
            <p>Click on the folliwng link for additional information</p>
            <a href="http://mySite/documents/guidances.docx">http://mySite/documents/guidances.docx</a>
        </mat-card-content>

带有工作链接的渲染页面

我的内容将来自网络服务，不再是静态页面。现在我插入内容如下

<mat-card>
                        **<mat-card-content>{{message.content}}</mat-card-content>**
                    </mat-card>

当 hmtl 页面呈现时，它不会对字符串进行任何 html 格式化。

看起来像这样

<p>Guidelines.</p><p>UClick on the folliwng link for additional information</p><a href="http://mySite/documents/guidances.docx">http://mySite/documents/guidances.docx</a>

它只是将 html 代码粘贴到 amt-card 中。

任何帮助表示赞赏。谢谢

我正在 Angular 7 中工作，我的要求之一是使用 mat-icons 创建一个 mat-select。我遇到的问题是我可以显示图标，也可以显示选项标签，但不能同时显示两者。我需要做的是能够链接该值，但是当我尝试时出现错误。

垫子选择设置如下-

    <button mat-raised-button type="button" name="button" color="primary" class="roundedButton">
    <mat-select [(value)]="selected2">
      <mat-select-trigger><mat-icon>{{selected2}}</mat-icon>{{selected2}}</mat-select-trigger>
      <mat-option *ngFor="let food of foods" [value]="food.value">
        <mat-icon>{{food.icon}}</mat-icon>{{food.viewValue}}
      </mat-option>
    </mat-select>
    </button>
</mat-form-field>

我已将选定的图标和标签放置在 mat-select-trigger 中，并将值放置在 food.value 中。

选择的界面是

export interface Food {
  value: string;
  viewValue: string;
  icon: any;
}

并且选择选项设置为

  foods: Food[] = [
    {value: 'steak-0', icon: 'add', viewValue: 'Steak'},
    {value: 'pizza-1', icon: 'lock', viewValue: 'Pizza'},
    {value: 'tacos-2', icon: 'search', viewValue: 'Tacos'}
  ];
    public selected2 = 'steak-0';

如果我将值更改为 food.icon，我可以让选择选项图标显示为选择。如果我将 value 更改为 food.viewValue 我会看到选项的标签出现。

当用户做出选择时，如何才能同时获得两者？ …

我想知道在 Android Studio 中使用语句时是否有任何方法可以以格式化方式查看 JSON 响应print()。

该解决方案适用于 Java，您可以在其中使用Log.i().

使用函数时如何让它工作print()？

我尝试在我的 Angular 应用程序中使用 p-table(PrimeNg table)，我从 CLI 导入了所有必要的依赖项和模块文件中的导入，错误是，

目标入口点“primeng/table”中的错误缺少依赖项：-@angular/cdk/scrolling

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AccordionModule } from 'primeng/accordion'; //accordion and accordion tab
import { MenuItem } from 'primeng/api';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TableModule } from 'primeng/table';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, AccordionModule,TableModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class …

我有一个<div>元素具有position: absolute与容器内position: relative。它的left和top属性绑定到component.ts. 我的目的是使用 cdk 拖放移动容器内的 div。

在dragEnded我检索需要更新坐标 X 和 Y 的数据时，问题就开始了......

<div
    class="character"
    [style.left.px]="x"
    [style.top.px]="y"
    cdkDrag
    cdkDragBoundary=".grid-container"
    (cdkDragEnded)="dragEnded($event, c)"
  ></div>

我注意到 cdk 拖放应用了一个属性transform: translate3d(x,y,z)来移动我的 div，从它的原始位置开始。所以，如果我希望我的 div left 和 top 绑定到我的后端属性，我可以在 dragEnd 事件上计算新坐标，应用它们，并重置由 cdk 制作的变换属性。一切正常。

但是下次我拖动元素时，材质不会从我的 div 的新绝对位置开始应用变换，而是从原始位置开始。

我认为一种解决方案可能是检查是否CdkDragEnd event包含与转换起点相关的数据并重置它，但我没有找到任何东西。

知道这个属性是否隐藏在 CdkDragEvent 中的某个地方吗？或者对这个问题有其他解决方案吗？

谢谢你们

我有对话框组件，里面有两个垫子按钮，但由于某种原因垫子按钮样式不适用。按钮样式适用于其他组件，但我不确定为什么它不只适用于这个对话框组件。

    <button mat-raised-button color = "primary"(click)="onNoClick()" style="margin-left:100px;">No, I'm still working.</button>
    <button mat-raised-button color = "primary"(click)="onNoClick()" style="margin-left:100px;">No, I'm still working.</button>

我已经在 app.module.ts 和 material.modules.ts 文件中导入但不确定

app.modules.ts

import {MatButtonModule} from '@angular/material/button';

  imports: [
    MatButtonModule,
]
  exports: [MatButtonModule],

material.modules.ts

import { MatButtonModule } from '@angular/material/button';
@NgModule({
  imports: [
    MatButtonModule,
}
  exports: [
    MatButtonModule,
}

任何建议为什么它可能是？谢谢

所以我有一个 Angular 组件。

使用一些包含我想要使用的数据的数组对象：

  books: Book[] = [];
  reviews: Review[] = [];

这是我的 ngOnInit() 的样子：

  ngOnInit(): void {
    this.retrieveBooks();
    this.retrieveReviews();
    this.setRatingToTen();
  }

有了这个，我将书籍和评论写入对象数组。这是通过服务“订阅”数据来完成的：

  retrieveBooks(): void {
    this.bookService.getAll()
      .subscribe(
        data => {
          this.books = data;
        },
        error => {
          console.log(error);
        }
      );
  }

  retrieveReviews(): void {
    this.reviewService.getAll()
      .subscribe(
        data => {
          this.reviews = data;
        },
        error => {
          console.log(error);
        });
  }

所以我的下一个函数只是“处理数据”的一个例子。

在此示例中，我只想将每本书的所有总评分更改为 10：

  setRatingToTen(): void {
    this.books.forEach(element => {
      element.totalrating = 10;
    });
    console.log(this.books);
  }

我一直试图解决的问题是：

this.books是一个空数组。 …

我正在研究 Angular 10。已经 3 天了，我遇到了 Angular 模板驱动和反应式表单的问题。

我想做的：创建一个包含许多子组件的复杂表单（以便分离大量代码）。然后单击一个按钮，我想验证所有表单和子组件。我想以某种方式验证子组件。

我创建的内容：具有双向绑定的模板驱动表单，因为我相信它更容易并且对于我的情况来说不需要。

我已经设法使验证仅适用于基本表单。我无法在儿童组件上做到这一点。我看到很多关于这个问题的帖子并尝试了很多，但我很困惑。

我的代码：

mainForm.html

<div class="card m-3">
    
    <div class="card-body">
      <fieldset>
        <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
        
            <div class="form-row">
                <div class="form-group col">
                    <label>Title</label>
                    <select name="title" class="form-control" [(ngModel)]="model.title" #title="ngModel" [ngClass]="{ 'is-invalid': f.submitted && title.invalid }" required>
                        <option value=""></option>
                        <option value="Mr">Mr</option>
                        <option value="Mrs">Mrs</option>
                        <option value="Miss">Miss</option>
                        <option value="Ms">Ms</option>
                    </select>
                    <div *ngIf="f.submitted && title.invalid" class="invalid-feedback">
                        <div *ngIf="title.errors.required">Title is required</div>
                    </div>
                </div>
                <div class="form-group col-5">
                    <label>First Name</label>
                    <input type="text" name="firstName" class="form-control" [(ngModel)]="model.firstName" #firstName="ngModel" [ngClass]="{ 'is-invalid': …