小编Adr*_*rma的帖子

我想在不使用change()或click()函数的情况下获取组件中表单的所有已检查项目,因为它无法获取已经检查过的项目.

这是我在TS中的数组:

  PartyRoles = [
    {
     Id: 1,
     Name: "Vendor",
     Checked: true
    },
    {
      Id: 2,
      Name: "Client",
      Checked: true
    },
    {
      Id: 3,
      Name: "Consigner",
      Checked: false
    }       
  ]

我的HTML表单:

<form (ngSubmit)="editPartyRolesSubmit()">
    <div *ngFor="let item of PartyRoles">
        <label>
        <input type="checkbox" value="{{item.Id}}" [attr.checked]="item.Checked==true ? true : null" [attr.disabled]="item.Id==1 ? true : null" />
        <span innerHTML="{{item.Name}}"></span>
       </label>
    </div>
</form>

我的onSubmit函数,我想要获取所有选中的值:

  editPartyRolesSubmit= function () {
    // Please suggest how to fetch checked items
  }

我已经部署了一个MVC站点，mysite.mydomain.co可以根据ADFS 进行身份验证并创建一个auth cookie：

public partial class Startup
{
    public void ConfigureUserAuth(IAppBuilder app)
    {
        app.SetDefaultSignInAsAuthenticationType(WsFederationAuthenticationDefaults.AuthenticationType);

        app.UseCookieAuthentication(new CookieAuthenticationOptions()
            {
                AuthenticationType = WsFederationAuthenticationDefaults.AuthenticationType
            });

        app.UseWsFederationAuthentication(
            new WsFederationAuthenticationOptions
            {
                MetadataAddress = ConfigurationManager.AppSettings["adsfs.MetadataAddress"],
                Wtrealm = ConfigurationManager.AppSettings["adsfs.Wtrealm"]
            });
    }
}

在启用了CORS的“ myapi.mydomain.com”上还部署了一个WebAPI网站：

GlobalConfiguration.Configuration.EnableCors(new EnableCorsAttribute("https://mysite.mydomain.com", "*", "*") { SupportsCredentials = true });

用户转到mysite.mydomain.com。MVC站点通过ADFS进行身份验证，我看到设置了身份验证cookie没问题。

我的应用程序主要是SPA，因此从javascript开始，有AJAX调用可以myapi.mydomain.com使用jQuery，将withCredentials选项设置为true：

$.ajaxSetup({
    xhrFields: { withCredentials: true }
});

该选项应该将安全凭证（cookie）发送到API。在运行时，我没有看到将cookie设置为API，并且按预期收到了401（未授权）错误。

如果我在localhost上运行相同的代码（当然，除了将源更改为localhost之外），我都会看到Cookie毫无问题地流入了API。我最好的猜测是它有效，因为它是相同的子域（localhost），而在我的服务器上是“ mysite”与“ myapi”。

有任何想法吗？

我正在为我的项目开发搜索功能。用户在搜索栏上键入任何内容后；搜索文本发生任何更改时，我都会将文本发送到后端进行验证并收到响应（文本错误或无错误）：

this.searchBar.on('change', () => {

    http.post('api_link', {searchText: 
       this.serachBar.searchText}).subscribe(resp => {
            this.resp = resp['Result'];
       });
    })

现在，当用户不断在搜索栏中键入内容时，后端会收到多个验证响应。但是，在进行任何新更改时，只有最新的订阅才有效，并且以前对api的任何调用都是无用的。

有什么办法可以使用订阅取消对api的任何新调用上的先前订阅？

注意：似乎可以等待所有响应，但是我还将在搜索栏下方显示响应（直到那时显示一个加载程序）。因此，我希望加载程序一直加载直到最新的响应可用，而不是在各种响应状态之间转换。

Angular 6，我在组件的构造函数中声明了一些注入的变量，但是我不知道如何在单元测试文件中配置注入的值，当我运行时ng test，它给出了以下错误：

错误：StaticInjectorError(DynamicTestModule)[title]:
StaticInjectorError(Platform: core)[title]: NullInjectorError: No provider for title！

//我的组件

export class ConfirmModalComponent extends BaseModal implements OnInit {
  choosedCandidates: Array<any> = [];

  constructor(
      @Inject('title') public title,//injected variable
      protected modalService: ModalService
  ) {
      super();
  }

  ngOnInit() {
  }
  ....
}
//spec file of my component
beforeEach(async(() => {
  TestBed.configureTestingModule({
      declarations: [ DelInterviewerConfirmModalComponent ],
      imports: [ CheckboxModule, TranslateModule ],
      providers: [ 
        { provide: title, useValue: 'modal title' },
        ModalService, 
        RequisitionDetailService ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ],
  })
.compileComponents(); …

我的屏幕上有一个按钮，如果用户已经添加点击它，它是一个垫子填充按钮，但如果我没有点击它，它是一个垫子按钮

我的代码看起来像这样

 <button
          *ngIf="myVote !== 'UPVOTE'"
          mat-button
          color="primary"
          (click)="onVote('UPVOTE')"
        >
          UPVOTE
        </button>
        <button
          *ngIf="myVote === 'UPVOTE'"
          mat-flat-button
          color="primary"
          (click)="onVote('NONE')"
        >
          UPVOTE
        </button>

基本上我有两个按钮，只有一个显示。显然，这是非常丑陋的。

有没有办法只用一个按钮就可以达到相同的结果，并且它有条件地是基于一组逻辑的amat-flat-button或 a mat-button？

我有以下父级 html

<p>Parent</p>
<app-child [mainData]="mainData"></app-child>

父.ts

mainData = [];
ngOnInit() { 
 this.myService((res)=>{
 this.mainData = res;
})
}

子 HTML

<p>My JSON {{mainData | json}}</p> //Here getting result from parent

孩子.ts

@Input() mainData = [];
myDataCopy = [];
ngOnInit() { 
   this.myDataCopy = this.mainData; 
   console.log('My copy Data', this.myDataCopy); // Doesn't get result on here 
}

如果我需要处理@Input数据怎么可能？

我正在尝试以表格形式迭代列表。以下列表应使用以下表格以表格形式呈现*ngFor：

输入/输出

let list = [
  {
    "key1": {
      "subkey1": [
        1,
        2,
        3,
        1
      ],
      "subkey2": [
        3,
        2,
        3,
        4
      ]
    }
  },
  {
    "key2": {
      "subkey1": [
        1
      ],
      "subkey2": [
        0
      ]
    }
  }
]

表格格式（表格应以这种方式呈现）：

Categories | subkey1 | subkey2

key1       | 1,2,3,1 | 3,2,3,4

key2       |  1      |  0

我试过了但是错了：

我尝试在component.html中进行迭代的代码：

 <table border="1">
      <thead>
          <tr>
              <th>Categories</th>
              <th *ngFor="let each of categoriesHeading"> {{each}} </th>  // Array of subkeys
            </tr>
      </thead>
      <tbody *ngFor="let each …

单击我尝试过的按钮后，我想更改所选行的背景颜色，但更改所有行的颜色。这是一个类似的代码。

HTML

<tr *ngFor="let data of (datas$ | async) | filter:authService.filter | paginate: config | orderBy: key : reverse" [ngClass]="{'data-selected':isSelected}">
    <td>{{data.id}}</td>
    <td>{{data.text}}</td>
    <td>
       <a class="mr-3" (click)="delete(data.id)"><i class="fa fa-remove"></i>
            Remove
       </a>
    </td>
</tr>

TS

delete(postId) {
    this.isSelected=true;
    const ans = confirm('TEXT TEXT '+dataid);
    if (ans) {
      this.dataService.deleteData(postId).subscribe((data) => {
        if(data) {
          this.showSuccessDelete();
        } else {
          this.showError();
        }
        this.isSelected=false;
        this.loadDatas();
      });
    }
  }

CSS

.data-selected{
  background-color: #e9eaea;
}

非常感谢

我正在创建 Angular 库，但有一些关于环境的问题。\n我生成了一个应用程序（父级）和库（子级）。\n如何从库中定义的子组件获取环境（在父级下定义）。

我生成了这样的应用程序。

ng version\n# Angular CLI: 8.0.1\n# Node: 10.15.3\n# OS: darwin x64\n# Angular: 8.0.0\nng new app-parent\ncd app-parent\nng generate library lib-child\n

像这样的项目结构。

$ tree -L 2\n.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 angular.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 browserslist\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 e2e\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 protractor.conf.js\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 karma.conf.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 projects\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 lib-child # <- wanna get environment from here!!\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 environments\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.ts\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 polyfills.ts\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 styles.sass\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 test.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.app.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.spec.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tslint.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 yarn.lock\n

我尝试导入为相对路径，例如... import …

我有一个ngFor带有课程列表的可观察对象。此列表上方是一行复选框，选中/取消选中时可以成功过滤列表。我正在尝试添加一个输入框来搜索和过滤同一列表。因为复选框通过更新behaviour subject提供可观察到的课程来工作，所以我无法使过滤工作。我认为下面的代码会过滤并返回可观察的课程，并且它会在模板中自动更新。但它没有任何效果。我整理了一个Stackblitz。如何使用复选框和搜索输入框过滤列表？

textFilter(searchString: string) {
  console.log(searchString)
  return this.courses
  .pipe(map((courses) => courses.filter( course => 
     course.Name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1))
  );
}