{"id":39508,"date":"2023-01-03T04:11:02","date_gmt":"2022-11-21T13:14:44","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/"},"modified":"2024-04-29T08:17:24","modified_gmt":"2024-04-29T00:17:24","slug":"%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/","title":{"rendered":"\u4f7f\u7528Angular Material\u6765\u5b9e\u73b0\u81ea\u52a8\u5b8c\u6210\u529f\u80fd"},"content":{"rendered":"

\u9996\u5148<\/h1>\n

Angular Material\u4e2d\u6709\u4e00\u4e2a\u53eb\u505a”\u81ea\u52a8\u5b8c\u6210”\u7684\u7ec4\u4ef6\u3002
\n\u5b83\u53ef\u4ee5\u6839\u636e\u81ea\u7531\u8f93\u5165\u7684\u5185\u5bb9\u6765\u7f29\u5c0f\u9009\u62e9\u5668\u7684\u9009\u9879\u3002<\/p>\n

\u81ea\u52a8\u8865\u5168\uff1ahttps:\/\/material.angular.io\/components\/autocomplete\/overview<\/p>\n

\u7136\u800c\uff0cAngular Material\u7684\u81ea\u52a8\u5b8c\u6210\u529f\u80fd\u5e76\u4e0d\u662f\u975e\u5e38\u65b9\u4fbf\uff0c\u5373\u4f7f\u8f93\u5165\u5185\u5bb9\u4e0e\u9009\u9879\u4e2d\u7684\u4efb\u4f55\u4e00\u4e2a\u90fd\u4e0d\u5339\u914d\uff0c\u8f93\u5165\u5185\u5bb9\u4ecd\u7136\u4f1a\u4fdd\u7559\u4e0b\u6765\u3002
\n\u6211\u8ba4\u4e3a\uff0c\u5982\u679c\u4ec5\u4f5c\u4e3a\u81ea\u7531\u8f93\u5165\u7684\u8f85\u52a9\u5de5\u5177\uff0c\u8fd9\u6837\u5c31\u8db3\u591f\u4e86\uff0c\u4f46\u4f5c\u4e3a\u9009\u62e9\u5668\u7684\u8fc7\u6ee4\u5668\u6765\u8bf4\u5e76\u4e0d\u7406\u60f3\u3002<\/p>\n

\u9009\u62e9\u5668\uff1ahttps:\/\/material.angular.io\/components\/select\/overview<\/p>\n

\u5728\u7814\u7a76\u540e\u53d1\u73b0\u786e\u5b9e\u5b58\u5728\u4e00\u79cd\u540d\u4e3ang-select\u7684\u7ec4\u4ef6\uff0c\u4f46\u662f\u5b83\u4e0eAngular Material\u7ec4\u4ef6\u7684\u914d\u5408\u5e76\u4e0d\u7406\u60f3\u3002\uff08\u7279\u522b\u662fmat-form-field\uff09<\/p>\n

\u6211\u4f7f\u7528Angular Material\u521b\u5efa\u4e86\u4e00\u4e2a\u53ef\u4ee5\u4f5c\u4e3a\u9009\u62e9\u5668\u8fc7\u6ee4\u5668\u7684\u81ea\u52a8\u5b8c\u6210\u3002<\/p>\n

\u6211\u6839\u636eReact\u7684MUI\u4e2d\u7684Autocomplete\u521b\u5efa\u4e86\u8fd9\u4e2a\u3002<\/p>\n

\u5b8c\u6210\u4efb\u52a1<\/h1>\n

 <\/p>\n

\u5b9e\u65bd<\/h1>\n

HTML (HyperText Markup Language) is a standard markup language used for creating and structuring web pages.<\/h2>\n
<form><\/span>\r\n  <mat-form-field<\/span> appearance=<\/span>\"fill\"<\/span>><\/span>\r\n    <mat-label><\/span>\u30e9\u30d9\u30eb<\/mat-label><\/span>\r\n    <input<\/span>\r\n      type=<\/span>\"text\"<\/span>\r\n      matInput<\/span>\r\n      #InputField<\/span>=\"<\/span>matInput<\/span>\"<\/span>\r\n      [formControl]=<\/span>\"myControl\"<\/span>\r\n      [matAutocomplete]=<\/span>\"auto\"<\/span>\r\n    \/><\/span>\r\n    <mat-icon<\/span> matSuffix<\/span>\r\n      ><\/span>{{ InputField.focused ? 'expand_less' : 'expand_more' }}<\/mat-icon<\/span>\r\n    ><\/span>\r\n    <mat-autocomplete<\/span>\r\n      autoActiveFirstOption<\/span>\r\n      #auto<\/span>=\"<\/span>matAutocomplete<\/span>\"<\/span>\r\n      [displayWith]=<\/span>\"autoCompleteDisplayFn\"<\/span>\r\n      (closed)=<\/span>\"onCloseAutoCompleteOptions()\"<\/span>\r\n    ><\/span>\r\n      <mat-option<\/span>\r\n        *ngFor=<\/span>\"let option of filteredOptions | async\"<\/span>\r\n        [value]=<\/span>\"option\"<\/span>\r\n        [ngClass]=<\/span>\"_allowSelection(option.id)\"<\/span>\r\n      ><\/span>\r\n        {{option.value}}\r\n      <\/mat-option><\/span>\r\n    <\/mat-autocomplete><\/span>\r\n  <\/mat-form-field><\/span>\r\n<\/form><\/span>\r\n<\/code><\/pre>\n
CSS (Cascading Style Sheets) is a coding language used to design and style webpages.<\/h2>\n
.no-data-auto-complete<\/span> {<\/span>\r\n  pointer-events<\/span>:<\/span> none<\/span>;<\/span>\r\n  color<\/span>:<\/span> gray<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
TypeScript -> TypeScript<\/h2>\n
import<\/span> {<\/span> Component<\/span>,<\/span> OnInit<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> FormControl<\/span> }<\/span> from<\/span> '<\/span>@angular\/forms<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Observable<\/span>,<\/span> of<\/span> }<\/span> from<\/span> '<\/span>rxjs<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> map<\/span>,<\/span> startWith<\/span>,<\/span> filter<\/span> }<\/span> from<\/span> '<\/span>rxjs\/operators<\/span>'<\/span>;<\/span>\r\n\r\ninterface<\/span> ItemType<\/span> {<\/span>\r\n  id<\/span>:<\/span> number<\/span>;<\/span>\r\n  value<\/span>:<\/span> string<\/span>;<\/span>\r\n}<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>autocomplete-auto-active-first-option-example<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>autocomplete-auto-active-first-option-example.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>autocomplete-auto-active-first-option-example.css<\/span>'<\/span>],<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AutocompleteAutoActiveFirstOptionExample<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n  myControl<\/span> =<\/span> new<\/span> FormControl<\/span><<\/span>string<\/span> |<\/span> ItemType<\/span>><\/span>(<\/span>''<\/span>);<\/span>\r\n  options<\/span>:<\/span> ItemType<\/span>[]<\/span> =<\/span> [<\/span>\r\n    {<\/span> id<\/span>:<\/span> 1<\/span>,<\/span> value<\/span>:<\/span> '<\/span>aaa<\/span>'<\/span> },<\/span>\r\n    {<\/span> id<\/span>:<\/span> 2<\/span>,<\/span> value<\/span>:<\/span> '<\/span>bbb<\/span>'<\/span> },<\/span>\r\n    {<\/span> id<\/span>:<\/span> 3<\/span>,<\/span> value<\/span>:<\/span> '<\/span>ccc<\/span>'<\/span> },<\/span>\r\n  ];<\/span>\r\n  filteredOptions<\/span>:<\/span> Observable<\/span><<\/span>ItemType<\/span>[]<\/span>><\/span> =<\/span> of<\/span>([]);<\/span>\r\n\r\n  ngOnInit<\/span>()<\/span> {<\/span>\r\n    this<\/span>.<\/span>filteredOptions<\/span> =<\/span> this<\/span>.<\/span>myControl<\/span>.<\/span>valueChanges<\/span>.<\/span>pipe<\/span>(<\/span>\r\n      startWith<\/span>(<\/span>''<\/span>),<\/span>\r\n      filter<\/span>((<\/span>x<\/span>):<\/span> x<\/span> is<\/span> string<\/span> |<\/span> ItemType<\/span> =><\/span> x<\/span> !=<\/span> null<\/span>),<\/span>\r\n      map<\/span>((<\/span>x<\/span>:<\/span> string<\/span> |<\/span> ItemType<\/span>)<\/span> =><\/span> (<\/span>typeof<\/span> x<\/span> ===<\/span> '<\/span>string<\/span>'<\/span> ?<\/span> x<\/span> :<\/span> x<\/span>.<\/span>value<\/span>)),<\/span>\r\n      map<\/span>((<\/span>x<\/span>:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>\r\n        if <\/span>(<\/span>x<\/span> ===<\/span> ''<\/span>)<\/span> {<\/span>\r\n          return<\/span> [...<\/span>this<\/span>.<\/span>options<\/span>];<\/span>\r\n        }<\/span>\r\n\r\n        \/\/ \u90e8\u5206\u4e00\u81f4<\/span>\r\n        const<\/span> filteredItemList<\/span> =<\/span> this<\/span>.<\/span>options<\/span>.<\/span>filter<\/span>((<\/span>i<\/span>)<\/span> =><\/span>\r\n          i<\/span>.<\/span>value<\/span>.<\/span>includes<\/span>(<\/span>x<\/span>)<\/span>\r\n        );<\/span>\r\n        return<\/span> filteredItemList<\/span>.<\/span>length<\/span> ><\/span> 0<\/span>\r\n          ?<\/span> filteredItemList<\/span>\r\n          :<\/span> [{<\/span> id<\/span>:<\/span> -<\/span>1<\/span>,<\/span> value<\/span>:<\/span> '<\/span>not found<\/span>'<\/span> }];<\/span>\r\n      })<\/span>\r\n    );<\/span>\r\n  }<\/span>\r\n\r\n  autoCompleteDisplayFn<\/span>(<\/span>item<\/span>?:<\/span> ItemType<\/span> |<\/span> null<\/span>):<\/span> string<\/span> {<\/span>\r\n    return<\/span> item<\/span> ?<\/span> item<\/span>.<\/span>value<\/span> :<\/span> ''<\/span>;<\/span>\r\n  }<\/span>\r\n\r\n  onCloseAutoCompleteOptions<\/span>():<\/span> void<\/span> {<\/span>\r\n    if <\/span>(<\/span>typeof<\/span> this<\/span>.<\/span>myControl<\/span>.<\/span>value<\/span> ===<\/span> '<\/span>string<\/span>'<\/span>)<\/span> {<\/span>\r\n      this<\/span>.<\/span>myControl<\/span>.<\/span>setValue<\/span>(<\/span>''<\/span>);<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n\r\n  _allowSelection<\/span>(<\/span>id<\/span>:<\/span> number<\/span>):<\/span> {<\/span> [<\/span>className<\/span>:<\/span> string<\/span>]:<\/span> boolean<\/span> }<\/span> {<\/span>\r\n    return<\/span> {<\/span>\r\n      '<\/span>no-data-auto-complete<\/span>'<\/span>:<\/span> id<\/span> ===<\/span> -<\/span>1<\/span>,<\/span>\r\n    };<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
    \n
  • \n
      \u4f55\u3082\u898b\u3064\u304b\u3089\u306a\u304b\u3063\u305f\u3068\u304d\u306f id = -1 \u3092\u5165\u308c\u3066\u3044\u307e\u3059<\/ul>\n<\/li>\n<\/ul>\n
       <\/p>\n
        \n
      • \n
          \u4eca\u56de\u306f\u5165\u529b\u5185\u5bb9\u306e\u90e8\u5206\u4e00\u81f4\u3067\u9078\u629e\u80a2\u3092\u7d5e\u3063\u3066\u3044\u307e\u3059<\/ul>\n<\/li>\n<\/ul>\n
          startWith(”) \u3092\u5165\u308c\u308b\u3053\u3068\u3067\u3001\u4eee\u306b\u6700\u521d\u304b\u3089\u5024\u304c\u5165\u3063\u3066\u3044\u305f\u3068\u3057\u3066\u3082\u3001\u6700\u521d\u306b\u9650\u308a\u3059\u3079\u3066\u306e\u9078\u629e\u80a2\u306e\u4e2d\u304b\u3089\u9078\u3079\u308b\u3088\u3046\u306b\u3057\u3066\u3042\u308a\u307e\u3059
          \n\u3042\u304f\u307e\u3067\u9078\u629e\u80a2\u306e\u305f\u3081\u306e\u30d5\u30a3\u30eb\u30bf\u3067\u3042\u3063\u3066\u6b32\u3057\u3044\u305f\u3081\u3001\u9078\u629e\u80a2\u3068\u5b8c\u5168\u4e00\u81f4\u3057\u3066\u3044\u308b\u6587\u5b57\u5217\u304c\u5165\u529b\u3055\u308c\u3066\u3044\u3066\u3082\u9078\u629e\u80a2\u3092\u30af\u30ea\u30c3\u30af\u3057\u306a\u3051\u308c\u3070\u3001\u9078\u629e\u3057\u3066\u3044\u306a\u3044\u3082\u306e\u3068\u3057\u3066\u6271\u3044\u307e\u3059
          \n\u306a\u306b\u3082\u5024\u304c\u5b58\u5728\u3057\u306a\u3044\u3068\u304d\u306b not found \u3092\u5165\u308c\u308b\u3053\u3068\u3067 closed \u304c\u767a\u706b\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059(\u9078\u629e\u80a2\u304c\u306a\u3044\u3068\u30d5\u30a9\u30fc\u30e0\u304b\u3089\u95a2\u5fc3\u304c\u5916\u308c\u3066\u3082\u9078\u629e\u80a2\u304c\u7573\u307e\u308c\u306a\u3044\u305f\u3081 closed \u306f\u767a\u706b\u3057\u306a\u3044)<\/p>\n
          \u8bf7\u51ed\u6b64\u4e3a\u53c2\u8003<\/h1>\n
            angular\/components#13013<\/ul>\n","protected":false},"excerpt":{"rendered":"
            \u9996\u5148 Angular Material\u4e2d\u6709\u4e00\u4e2a\u53eb\u505a”\u81ea\u52a8\u5b8c\u6210”\u7684\u7ec4\u4ef6\u3002 \u5b83\u53ef\u4ee5\u6839\u636e\u81ea\u7531 […]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-39508","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u4f7f\u7528Angular Material\u6765\u5b9e\u73b0\u81ea\u52a8\u5b8c\u6210\u529f\u80fd - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular-material\u6765\u5b9e\u73b0\u81ea\u52a8\u5b8c\u6210\u529f\u80fd\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4f7f\u7528Angular Material\u6765\u5b9e\u73b0\u81ea\u52a8\u5b8c\u6210\u529f\u80fd\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148 Angular Material\u4e2d\u6709\u4e00\u4e2a\u53eb\u505a”\u81ea\u52a8\u5b8c\u6210”\u7684\u7ec4\u4ef6\u3002 \u5b83\u53ef\u4ee5\u6839\u636e\u81ea\u7531 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular-material\u6765\u5b9e\u73b0\u81ea\u52a8\u5b8c\u6210\u529f\u80fd\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-21T13:14:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T00:17:24+00:00\" \/>\n<meta name=\"author\" content=\"\u96c5, \u609f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u96c5, \u609f\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/\",\"name\":\"\u4f7f\u7528Angular Material\u6765\u5b9e\u73b0\u81ea\u52a8\u5b8c\u6210\u529f\u80fd - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2022-11-21T13:14:44+00:00\",\"dateModified\":\"2024-04-29T00:17:24+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4f7f\u7528Angular Material\u6765\u5b9e\u73b0\u81ea\u52a8\u5b8c\u6210\u529f\u80fd\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6\",\"name\":\"\u96c5, \u609f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g\",\"caption\":\"\u96c5, \u609f\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yawu\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4f7f\u7528Angular Material\u6765\u5b9e\u73b0\u81ea\u52a8\u5b8c\u6210\u529f\u80fd - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular-material\u6765\u5b9e\u73b0\u81ea\u52a8\u5b8c\u6210\u529f\u80fd\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4f7f\u7528Angular Material\u6765\u5b9e\u73b0\u81ea\u52a8\u5b8c\u6210\u529f\u80fd","og_description":"\u9996\u5148 Angular Material\u4e2d\u6709\u4e00\u4e2a\u53eb\u505a”\u81ea\u52a8\u5b8c\u6210”\u7684\u7ec4\u4ef6\u3002 \u5b83\u53ef\u4ee5\u6839\u636e\u81ea\u7531 […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528angular-material\u6765\u5b9e\u73b0\u81ea\u52a8\u5b8c\u6210\u529f\u80fd\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2022-11-21T13:14:44+00:00","article_modified_time":"2024-04-29T00:17:24+00:00","author":"\u96c5, \u609f","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u96c5, \u609f","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"2 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/","name":"\u4f7f\u7528Angular Material\u6765\u5b9e\u73b0\u81ea\u52a8\u5b8c\u6210\u529f\u80fd - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2022-11-21T13:14:44+00:00","dateModified":"2024-04-29T00:17:24+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4f7f\u7528Angular Material\u6765\u5b9e\u73b0\u81ea\u52a8\u5b8c\u6210\u529f\u80fd"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6","name":"\u96c5, \u609f","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g","caption":"\u96c5, \u609f"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yawu\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8angular-material%e6%9d%a5%e5%ae%9e%e7%8e%b0%e8%87%aa%e5%8a%a8%e5%ae%8c%e6%88%90%e5%8a%9f%e8%83%bd%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=39508"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39508\/revisions"}],"predecessor-version":[{"id":84104,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39508\/revisions\/84104"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=39508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=39508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=39508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}