如何检查 Angular 中的长度

Question

我有普通标签组件和超级标签组件。我已经在我的编辑页面组件中导入了这两个组件。我试图让用户在 exist/close 编辑页面之前至少有 1 个普通标签和超级标签，但不太确定如何检查长度，所以如果我能得到任何建议或帮助，我将不胜感激。

我在

中导入了这样的超级标签组件和普通标签组件

编辑页面component.HTML

<div class="super-container">
    <div class="tag-header"> Super Tags </div>
    <mat-hint class="hint">A minimum of one Super Tag is required for creating a Workspace</mat-hint>
    <mc-manage-super-tags [workspace]="workspace" (removed)="superRemoved($event)"></mc-manage-super-tags>
</div>

<div class="tag-container">
    <div class="tag-header"> Tags </div>
    <mat-hint class="hint">A minimum of one Tag is required for creating a Workspace</mat-hint>
    <mc-tags [workspace]="workspace" [removable]="true" [selectable]="true" [canAdd]="true" [editMode]="true" [getAllTags]="true" (added)="tagAdded($event)" (removed)="tagRemoved($event)"> </mc-tags>
</div>

编辑页面Component.TS

// This is how I add Normal Tag in the backend

  tagAdded(tag: string) {
    this.tagService.addTag(this.workspace.guid, 'workspace', tag).pipe(takeUntil(this.death$)).subscribe((tag) => {
      const foundTag = this.workspace.tags.find(t => t.tag === tag.tag);
      if (!foundTag) {
        this.workspace.tags.push(tag);
      } else {
        foundTag.pending = false;
        foundTag.tag = tag.tag;
        foundTag.type = tag.type;
      }
    })
    this.snackbar.open(tag + " has been added as tag.", " ", {duration: 2500});
  }

//I want to check here if user have at least 1 or not. Right now it's not working

  close(){
    if(this.tagAdded.length >= 1 ){
      this.router.navigate(['workspace']);
    }else{
      this.snackbar.open("Error: must have at least 1 tag", "", {duration: 2500})
    }}

我不确定我是否应该将该逻辑放在普通组件和超级标签组件中，或者我可以像我现在尝试做的那样在编辑页面组件中这样做。

Answer 1

我认为你在工作区对象中推送标签 this.workspace.tags.push(tag); 并且这个工作区对象在组件（超级和普通）中都使用，所以你可以像这样检查工作区对象内标签的长度：

this.workspace.tags.length >= 1

希望它能奏效。如果没有，请为您的问题创建 stackblitz，以便我可以为您提供更多帮助。

如何检查 Angular 中的长度

how to check length in Angular

html

variable-length

typescript

angular-material

angular