如何在Angular中传递参数

Posted 2023-02-22

【中文标题】如何在Angular中传递参数

【英文标题】：How to pass argument in Angular

【发布时间】：2020-09-28 02:02:24

【问题描述】：

我正在使用 mat-autocomplete，由于某种原因，当我从下拉列表中选择项目时，我的功能无法正常工作，所以我认为我需要在我的选择中传递 add() 函数，但我知道它是“预期 1 个参数，但得到 0"。我不确定要通过什么。

任何建议，

  add(event: MatChipInputEvent): void 
    const input = event.input;
    const value = event.value;
    this.tagService.addTag(this.workspace.guid, 'workspace', value).subscribe((tag) => console.log("added", tag));
    if ((value || '').trim()) 
      this.superTags.push(tag: value.trim(), type: TagType.super);
    
    if (input) 
      input.value = '';
    
    this.tagCtrl.setValue(null);
  

 selected(event: MatAutocompleteSelectedEvent): void 
    const tag = tag: event.option.viewValue, type: TagType.super;
    this.superTags.push(tag);
    this.add()             //I'm getting error that it expected 1 argument

    if(this.input)
      this.input.nativeElement.value = "";
    
    this.tagCtrl.setValue(null);
    var index = this.allSuperTagNames.indexOf(tag.tag);
    this.allSuperTagNames.splice(index, 1);
    this.mapper();
  

html

    <mat-form-field class="form" appearance="fill">
        <mat-label>Select a Super Tag</mat-label>
        <mat-chip-list #chipList>
            <div>
                <mat-chip *ngFor="let superTag of superTags" [selectable]="selectable" [removable]="removable"
                    (removed)="remove(superTag)">
                    superTag.tag
                    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                </mat-chip>
            </div>
            <div>
                <input matInput #input [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="add($event)">
            </div>
        </mat-chip-list>
        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
            <mat-option *ngFor="let tag of filteredSuperTags | async" [value]="tag">
                tag
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>

【问题讨论】：

请提供HTML代码以便更好地理解

@OAH 嗨，我刚刚上传了 HTML .. 谢谢

【参考方案1】：

add 函数需要一个 MatChipInputEvent 事件作为参数。您需要向它传递类似this.add(event) 的事件。

您可能应该删除封装 and 的 div，您最终可能会得到这样的结果。 `

<mat-form-field class="form" appearance="fill">
  <mat-label>Select a Super Tag</mat-label>
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let superTag of superTags" [selectable]="selectable" [removable]="removable"
        (removed)="remove(superTag)">
        superTag.tag
        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input matInput #input [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
      <mat-option *ngFor="let tag of filteredSuperTags | async" [value]="tag">
          tag
      </mat-option>
  </mat-autocomplete>
</mat-form-field>

`

【参考方案2】：

您需要将您的事件传递给 add() 函数：

 selected(event: MatAutocompleteSelectedEvent): void 
    const tag = tag: event.option.viewValue, type: TagType.super;
    this.superTags.push(tag);
    this.add(event)             //pass the event 

    if(this.input)
      this.input.nativeElement.value = "";
    
    this.tagCtrl.setValue(null);
    var index = this.allSuperTagNames.indexOf(tag.tag);
    this.allSuperTagNames.splice(index, 1);
    this.mapper();
  

检查声明 add 函数是这样的：

 add(event)
    const input = event.input;
    const value = event.value;
    this.tagService.addTag(this.workspace.guid, 'workspace', value).subscribe((tag) => console.log("added", tag));
    if ((value || '').trim()) 
      this.superTags.push(tag: value.trim(), type: TagType.super);
    
    if (input) 
      input.value = '';
    
    this.tagCtrl.setValue(null);
  

【讨论】：

谢谢你，还有一个问题。所以在下拉列表中我有两个词 Maixs 和 Chart（后端数据）。当用户从下拉列表中选择时，我会变得不确定，所以你有没有可能会发生这种情况？当用户键入其中任何一个并按 Enter 时，它工作正常，但是当我从下拉列表中选择时，我变得不确定。

可能你的类型有误，试试这个 selected(event) 并在访问事件之前尝试做一个控制台 console.log('my event',event) 以确保你得到预期的数据