代码之家  ›  专栏  ›  技术社区  ›  Johan Rin

以反应式形式存储和检索select字段的长字符串[]

  •  0
  • Johan Rin  · 技术社区  · 5 年前

    假设您有一个基本的反应形式,其中有一个这样的选择字段:

    /* .ts */
    this.myForm = this.fb.group({
      hero: ['', Validators.required]
    });
    
    
    /* .html */
    <div class="field">
      <label class="label">My hero</label>
      <div class="control">
        <div class="select">
          <select formControlName="hero">
            <option *ngFor="let hero of heroes" [value]="hero">{{ hero }}</option>
          </select>
        </div>
      </div>
    </div>
    

    假设 heroes 是一个数组,其中100-150个条目在应用程序中多次使用,但您不希望将其存储在数据库中。 我需要重复使用 英雄 在其他不相关的表单和组件中也不相关(没有父子组件)。

    你如何储存和找回你的英雄?

    现在,我有一个 data.ts 在组件中检索到的所有条目 heroes = heroes;

    2 回复  |  直到 5 年前
        1
  •  1
  •   ForestG    5 年前

    最简单的方法是将此数组提取到 service 你可以注射到每一个 component 你想用。

    @Injectable()
    export class HeroesService {
    
      heroes = [];
    
      constructor(){
        // you can request, or set your common array here
        this.heroes = ........;
      }  
    }
    

    这样,您可以在启动服务时请求数组,并且每个组件都可以使用相同的服务。

    @Component({
      selector: ....
    })
    export class ExampleComponent{
    
      constructor(private _hs: HeroesService){
        // from this point, you can access the array as _hs.heroes;
      }
    }
    

    (不要忘记将服务添加到 app.module 提供程序)查看如何精确地实现这一点, check out the tutorial.

        2
  •  1
  •   wentjun    5 年前

    如果您来自React Redux背景,您可以考虑在应用程序中通过使用 NgRx . 它允许您通过使用减速器/选择器来控制数据流。但是,我只建议在您有更复杂的状态管理需求的情况下这样做,因为在小角度项目中实现NGRX/Redux可能是一种过度杀伤力。另外,@forestg提供的答案已经足够了。